Question

我正在尝试将多个点击功能与切换类组合成一个将分别影响多个元素的功能。如图所示，我想在点击时更改元素的css，只有一个在同一个父元素内部，而忽略任何其他具有相同类的元素。

HTML：

<div style="display: inline-block">    
    <section class="container2">
       1
    </section>
    <section>
        <p><button id="button">change</button></p>
    </section>
</div>

CSS：

.background {
    background: red !important;
}
.container2 {
    background: black;
    width: 100px;
    height: 50px;
    color: white;
}

jQuery的：

var removeClass = true;

$("#button").click(function () {
    $('.container2').toggleClass('background');
    removeClass = false;
});

$(".container2").click(function() {
    removeClass = false;
});

$("html").click(function () {
    if (removeClass) {
        $(".container2").removeClass('background');
    }
    removeClass = true;
});

http://jsfiddle.net/dkhhecf2/1/

我知道我可以写这样的东西

$（“＃one，＃two，＃three”）。点击......

但还有其他方法吗？

http://i.stack.imgur.com/wJhKu.png

非常感谢任何帮助。

Answer 1

HTML

<div class="inline actionset">
   <div>1</div>
    <button>change</button>
</div>
<div class="inline actionset">
    <div>2</div>
    <button>change</button>
</div>

CSS

.inline {
    display:inline-block;
}
.highlight {
    background: red !important;
}
.actionset > div {
    background: black;
    width: 100px;
    height: 50px;
    color: white;
}

JS

$('.actionset button').on('click', function (e) {
    var $this = $(this);
    var el = $this.prev();
    el.toggleClass('highlight');
});

http://jsfiddle.net/dkhhecf2/2/

每页只能使用一次ID
您的标记需要一些帮助来清理它

对于JS，你可以引用被点击的元素$（this）。使用此方法，您可以使用jQuery遍历DOM以选择要影响的元素。我用了prev();。

Answer 2

首先，id必须是唯一的。因此，您不能为不同的元素使用相同的ID。并且，为了将函数激活到不同的元素，元素具有不同的id很容易。

因此，

$("#button1").click(function(){
    $("#1").toggleClass("background");

});


$("#button2").click(function(){
    $("#2").toggleClass("background");

});

http://jsfiddle.net/dkhhecf2/3/

单击按钮时将jQuery .addClass（）组合到该按钮所在的元素

2 个答案: