jQuery一个事​​件处理程序，用于处理多个元素和事件

Question

im trying to figure out how I can make this code in only one eventhandler... So it knows what element has been clicked and from there executes the right .text action on the correct element. Any ideas? :)

$(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!");
    });
});

Answer 1

I don't know if I have catched the idea, do you mean something like this:

####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); }); }); 

See JsFiddle: https://jsfiddle.net/skfd8b84/

Answer 2

Just use a class, and add some inner logic. For example - using data-* attrs would be the cleanest:

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

Here's a demo:

 $(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> 

Answer 3

With jQuery, you can combine selectors using commas. It could look like this:

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

Depending on your situation, this is probably better suited for a class to be on those elements instead.

You could then use data attributes in HTML to handle the correct actions:

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

So that you can then set the correct values:

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