jQuery - 对多对项目使用相同的脚本答案

【问题标题】：jQuery - Using the same script for multiple pairs of itemsjQuery - 对多对项目使用相同的脚本
【发布时间】：2013-07-19 17:31:24
【问题描述】：

当然，这肯定以前在这里问过，但找不到任何东西。

我有一个页面，左侧是按钮列表，右侧是 div 列表。每个按钮都有一个对应于 div 的 ID 的类。例如，按钮一是“.button1”，当点击时，对“#div1”、“.button2”到“#div2”等执行一些操作。如果这是我的脚本：

$('.button1').click(function(){
    $("#div1").css("color","red");
});
$('.button2').click(function(){
    $("#div2").css("color","red");
});
and so on...

...与其对每一对重复它，我知道我可以获取单击按钮的类，检查最后的数字，检查 div ID 并将其与相应的匹配。

但我不知道该怎么做！

【问题讨论】：

是否可以有几个类与同一个按钮相关联？
您的 html 结构如何？
@DavidThomas 它可以以任何方式构建，在我决定明确的结构之前，我很想看看对此的不同看法。
@DenysDenysenko 是的，它可能有耦合类。

标签： jquery

【解决方案1】：

这样的事情呢？

工作 jsFiddle： http://jsfiddle.net/AWvv5/2/

将点击处理程序分配给整个 btn 类，然后在处理程序中简单地将“btn”替换为“div”。

HTML：

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>

<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>

Javascript：

$(".btn").click(function(e){
    var divId = this.id.replace("btn","div");
    $("#"+divId).css("color","red");
});

【讨论】：

为什么要为每个按钮添加一个事件处理程序？这是一个教科书示例，说明事件委托何时适合这项工作。
@JohanBouveng 仅当结构适合事件冒泡时。我们还没有看到任何来自 OP 的 HTML。
太好了，这对于我当前的 html 结构来说工作得很好，所以我会接受这个作为答案！
@mabi 什么时候结构不适合事件冒泡？
@JohanBouveng 当您没有按钮容器时。将你的处理程序附加到身体上让我的遗留维护者感到害怕（尽管我真的很喜欢它的简单性）。

【解决方案2】：

Ew，这是一个使用事件委托的最小工作示例。即使有 999 个按钮，这也是一种魅力。人们应该通过在不需要时添加 999 个事件处理程序来停止滥用。

http://jsfiddle.net/5YYDU/

$("#buttons").on("click",":button",function(e){
    $("#div"+$(this).attr("id").replace(/[^0-9]/g, '')).css("background","red");
});

【讨论】：

【解决方案3】：

关注jQuery - match element that has a class that starts with a certain string 我会使用

$("button[class*='id_prefix']").click(function(){
  var classes = $(this).attr('class').split(' ');
  var selector = $.grep(classes, function(el)
    { return el.startsWith('id_prefix'); }
  )[0];
  $('#' + selector).css('color', 'red');
});

【讨论】：

【解决方案4】：

为了获得更大的灵活性，您可以为每个按钮设置一个目标，而不是依赖匹配的名称，例如：http://jsfiddle.net/AKkG8/

<button class="btn" data-target="#div1">1</button>
<button class="btn" data-target="#div2">2</button>
<button class="btn" data-target="#div4">3, sets 4</button>
<button class="btn" data-target="#div3">4, sets 3</button>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

$(".btn").on("click", function () {
    $($(this).data('target')).toggleClass('clicked');
})

css

div {
    padding: 30px;
    margin: 5px;
    background-color: #e0e0e0;
}
button {
    padding: 5px;
    margin: 5px;
    background-color: #e0e0e0;
}
.clicked { background-color: #808080; }

【讨论】：