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

Jquery toggle span text in trigger

本文关键字：文本 触发器 Jquery      更新时间：2023-09-26

我想我已经快要弄清楚了。我是javascript的新手，但这是我的情况。

我默认情况下隐藏了一些列表。单击标题显示列表。我希望页眉中的跨度从"+"变为"-"，以分别隐藏和显示。

我遇到的问题是两个标题的跨度都发生了变化，而不仅仅是被点击的那个。

    <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

试试这个：

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

​

您需要特别告诉javascript只隐藏与该标头相关的span

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') ? '-' : '+');
    });
});

尝试：

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

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

您非常接近：）这是更新jsfiddle（有多种方法可以实现）。如果您在slideToggle中访问$('span')，您将访问所有跨度，这就是它同时更改这两个跨度的原因。你只需要访问点击标题的跨度，所以你必须遍历回它

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

在jQuery中使用。操作符中，您正在请求jQuery获取带有CLASS of toggle的所有DOM元素。如果你想更改其中一个，你可以要求一个特定的id。唯一地命名它们，并使用$（"#IDHERE"）访问，你会得到一个更新，另一个保持不变。

相关文章：