-1

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

我有一个页面，左侧是按钮列表，右侧是 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 并将其与相应的匹配。

但是我不知道该怎么办！

4

4 回答 4

1

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

http://jsfiddle.net/5YYDU/

$("#buttons").on("click",":button",function(e){
    $("#div"+$(this).attr("id").replace(/[^0-9]/g, '')).css("background","red");
});
于 2013-07-19T09:14:23.553 回答
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");
});
于 2013-07-19T09:02:27.377 回答
0

遵循jQuery - 匹配元素，该元素具有以我将使用的某个字符串开头的类

$("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');
});
于 2013-07-19T09:07:43.810 回答
0

为了获得更大的灵活性，您可以为每个按钮设置一个目标，而不是依赖匹配的名称，如下所示：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; }
于 2013-07-19T09:25:38.707 回答