Question

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

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

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

...而不是为每一对重复它，我知道我可以得到点击按钮的类，检查末尾的数字，检查div ID并将其与相应的ID匹配。

但我不知道该如何去做！

Answer 1

这样的事情怎么样？

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

将click处理程序分配给整个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");
});

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

Answer 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');
});

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

JS

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

jQuery - 为多对项使用相同的脚本

4 个答案: