Question

我认为，我非常接近搞清楚这一点。我是javascript的新手，但这是我的情况。

我默认隐藏了一些列表。单击标题会显示列表。我希望标题中的span从“+”变为“ - ”以分别隐藏和显示。

我遇到的问题是两个标题的范围更改，而不仅仅是单击的标题。

    <div>
    <h3 class = "trigger"><span>+</span>Heading 1</h3>
    <ul class = "toggle">
        <li>Line One</li>
        <li>Line Two</li>
        <li>Line Three</li>
    </ul>
</div>
<div>
    <h3 class = "trigger"><span>+</span>Heading 2</h3>
    <ul class = "toggle">
        <li>Line One</li>
        <li>Line Two</li>
        <li>Line Three</li>
    </ul>
</div>

这是随附的javascript。

$(".trigger").click(function(){
    $(this).next(".toggle").slideToggle(function(){
    $('span').text(
        $('.toggle').is(':visible') ? '-' : '+');
    });
});

这是jsfiddle

Answer 1

试试这个：

$(".trigger").click(function(){
    var trigger = $(this);
    $(this).next(".toggle").slideToggle(function(){
    trigger.children('span').text(
        $('.toggle').is(':visible') ? '-' : '+');
    });
});

Answer 2

您需要专门告诉javascript只隐藏与该标题相关的范围

http://jsfiddle.net/sWvbq/5/

这样做的一种方式：）

$(".trigger").click(function(){
    var _that = $(this); // remember parent
    $(this).next(".toggle").slideToggle(function(){
    _that.find('span').text( // only toggle span related to parent
        $('.toggle').is(':visible') ? '-' : '+');
    });
});

Answer 3

尝试：

$(".trigger").click(function(){
    var $this = $(this);
    $this.next(".toggle").slideToggle(function(){
        $this.find("span").text($(this).is(':visible') ? '-': '+');
    });
});

演示：http://jsfiddle.net/N8YVD/

Answer 4

你非常接近:)这是更新jsfiddle（有多种方法可以达到它）。如果您在$('span')内访问slideToggle，则会触及所有跨度，这就是为什么它会同时发生变化。您只需要从单击的标题访问范围，因此您必须遍历它。

$(".trigger").click(function(){
    $(this).next(".toggle").slideToggle(function(){
    $(this).prev().children('span').text(
        $('.toggle').is(':visible') ? '-' : '+');
    });
});

Answer 5

在jQuery中使用时。运算符你要求jQuery通过一系列切换来获取所有DOM元素。如果您想要更改，您可以要求特定的ID。将它们命名为唯一，并使用$（＆＃39;＃IDHERE＆＃39;）进行访问，您将获得一个更新，另一个将保持不变。

Jquery在触发器中切换跨度文本

5 个答案: