Question

我试图找出如何只在一个事件处理程序中创建此代码... 因此它知道单击了哪个元素，并从那里对正确的元素执行正确的.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-* attrs将是最干净的：

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

这是一个演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Jquery多个元素和事件的一个事件处理程序

3 个答案: