Jquery为多个元素和事件查询一个事件处理程序

Question

我试图弄清楚如何在一个事件处理程序中生成这些代码。。。因此，它知道点击了哪个元素，然后对正确的元素执行right.text操作。有什么想法吗？：）

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

我不知道我是否明白了这个想法，你的意思是这样的吗：

####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/

Answer 2

只需使用一个类，并添加一些内部逻辑。例如，使用data-*属性将是最干净的：

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

Answer 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+"!");
  });
});