Question

我有以下代码来点击容器：

这是代码。

$('#toggleSubscribe').click(function() {
    $('#subscribe > .toggleSubscribe').toggle();
    $(this).text(function(i,txt) {
        return txt === "Subscribe" ? "Unsubscribe" : "Subscribe";
    }).toggleClass('myClass');
});

但是在我添加了具有相同ID的更多容器之后，它就会中断。有没有办法改变代码并保持切换只在我的div上，所以整个脚本可以在多个地方使用？

以下是小提琴http://jsfiddle.net/Zmsnd/238/

的链接

Answer 1

你走了：

<div class='subscribe'> 
    <div id='divA' class='toggleSubscribe' style="display:none">You are now Subscribed</div> 

    <a href='#' class='toggleSubscribe'>Subscribe</a>
</div> 

<div class='subscribe'> <div id='divB' class='toggleSubscribe' style="display:none">You are now Subscribed</div> 
    <a href='#' class='toggleSubscribe'>Subscribe</a>
</div>

和js

$('a.toggleSubscribe').click(function() {
    var mydiv = $(this).parent('div.subscribe');
    $(mydiv).find('div.toggleSubscribe').toggle();
    $(this).text(function(i,txt) {
        return "Subscribe";
    }).toggleClass('myClass');
});

以下是小提琴的链接：http://jsfiddle.net/r8M8w/9/

Answer 2

我会清理你的HTML。如果它们位于不同的容器中，请从jquery选择器中删除#subscribe。

<div id='subscribe'>
    <a href='#' class='toggleSubscribe'>Subscribe</a>
    <a href='#' class='toggleSubscribe'>Subscribe</a>
</div>

$('#subscribe .toggleSubscribe').click(function() {
    $(this).text(function(i,txt) {
        return txt === "Subscribe" ? "Unsubscribe" : "Subscribe";
    }).toggleClass('myClass');
});

http://jsfiddle.net/Zmsnd/241/

将jQuery事件处理程序仅限制为一个容器

2 个答案: