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的一个事件处理程序的多个元素和事件

回答

相关问题