JQuery的一個事件處理程序的多個元素和事件

即時通訊試圖弄清楚如何我可以使這個代碼在只有一個事件處理程序...因此它知道什麼元素被點擊，然後從那裏執行正確的.text行動正確的元素。有任何想法嗎？ :)JQuery的一個事件處理程序的多個元素和事件

$(document).ready(function(){ 
    $("#knapp1").on("click", function(){ 
     $("#hund").text("Voff!"); 
    }); 

     $("#knapp2").on("click", function(){ 
     $("#katt").text("Miau!"); 
    }); 

     $("#knapp3").on("click", function(){ 
     $("#gris").text("Nöff!"); 
    }); 
});

來源

2015-02-10 eddvedd

什麼是HTML是什麼樣子？也許有某種模式......是元素的後代？ – 2015-02-10 20:06:12

請發佈您的HTML – void 2015-02-10 20:08:37

@JoshCrozier我們實際上並不需要看到他的html來幫助這個 – yuvi 2015-02-10 20:19:12

-1

只要使用一個類，並添加一些內部邏輯。例如 - 使用data-* attrs將是最乾淨的：

<button class="knapp" data-target="targetid" data-text="new text">click me!</button>

這裏有一個演示：

$(document).ready(function(){ 
 
    $(".knapp").on('click', function() { 
 
      var $this = $(this),    // so I only call $(this) once 
 
       target = $this.data('target'), // grab target 
 
       text = $this.data('text'); // grab text 
 
     
 
     $(target).text(text); // finally, execute 
 
    }); 
 
});

* { font-family: sans-serif; } 
 
button { background: white; border: 1px solid #c1c1c1; border-radius: 3px; padding: 5px; } 
 
div { margin: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="knapp" data-target="#hund" data-text="Voff!">Dog goes</button> 
 
<button class="knapp" data-target="#katt" data-text="Miau!">Cat goes</button> 
 
<button class="knapp" data-target="#gris" data-text="Nöff!">Gris(?) goes</button> 
 

 
<div> 
 
    <span id="hund">hund</span> 
 
    <br /> 
 
    <span id="katt">katt</span> 
 
    <br /> 
 
    <span id="gris">gris</span> 
 
</div>

來源

2015-02-10 20:07:00 yuvi

@Downvoter請留下評論。 – yuvi 2015-10-17 14:03:34

-3

使用jQuery，您可以用逗號選擇結合起來。它可能看起來像這樣：

$(document).ready(function(){ 
    $("#knapp1, #knapp2, #knapp3").on("click", function(){ 
     //`this` now refers to the element that was clicked. 
    }); 
});

根據您的情況，這可能更適合於類，而不是這些元素。在HTML

然後，您可以使用數據屬性來處理正確的動作：

<div id="knapp1" data-animal="hund" data-animal-sound="Voff"></div>

這樣就可以再設置正確的值：

$(document).ready(function(){ 
    $("#knapp1, #knapp2, #knapp3").on("click", function(){ 
     var animal = $(this).data('animal'); 
     var sound = $(this).data('animal-sound'); 
     $("#"+animal).text(sound+"!"); 
    }); 
});

來源

2015-02-10 20:09:08 Brennan

我不知道如果我有逮住的想法，你的意思是這樣的：

#### HTML

<div id="group1"> 
    <span id="knapp1" data-content="Voff!">hund</span> 
    <br /> 
    <span id="knapp2" data-content="Miau!">katt</span> 
    <br /> 
    <span id="knapp3" data-content="Nöff!">gris</span> 
</div> 

<div> 
    <span id="hund"></span> 
    <br /> 
    <span id="katt"></span> 
    <br /> 
    <span id="gris"></span> 
</div>

##### JAVASCRIPT

$(document).ready(function(){ 
    $("#group1 span").on('click', function() { 
     selectorid=$(this).text(); 
     texttoput=$(this).attr("data-content"); 
     $("#"+selectorid).text(texttoput); 
    }); 
});

見的jsfiddle：https://jsfiddle.net/skfd8b84/

來源

2015-09-22 10:43:16

JQuery的一個事件處理程序的多個元素和事件

回答

相關問題