Javascript 修改扰流板

有一条鳕鱼。如何执行以下操作：当按下“全部打开”时，所有+更改为-

html:

JS:

---

感谢大家帮助noobs:

使用.text的回调函数设置+或-：

$(this).find(".sp_ind").text(function() {
     return $(this).text() == "+" ? "-" : "+";
});

---

根据@ScottSauyet的评论，这里有一个更新的演示，它也更新了您的链接文本：

如果您要使用JQuery，我建议您稍微重新构造代码，首先将标记清理为：

<a href="#" id="expand_all">expand all</a>
        /
<a href="#" id="close_all">close all</a>
<a href="" class="spoiler_title">Title<span class="sp_ind">+</span></a>

<div class="spoiler_toggle">
    <div class="spoiler_bg">
        <p>artile</p>
    </div>
</div>

这是您的小提琴：

对HTML的更改：

<a class="expander" style="cursor:pointer; text-decoration: underline;">expand all</a>
    /
<a class="collapser" style="cursor:pointer; text-decoration: underline;">close all</a>

以下是可能适合的：

<a onclick="changeState('show')" ...>expand all</a>
<a onclick="changeState('hide')" ...>close all</a>

var changeState = (function() {
    var showing = false;
    return function(type) {
        if (type !== 'show' && type !== 'hide') { // 'toggle' or other
            type = showing ? 'hide' : 'show';
        }
        showing = (type === 'show');
        $("div[class^='spoiler_toggle']")[type]();
        $(".sp_ind").text(type === 'show' ? '-' : '+');
        return false;
    }
}());

$(document).ready(function(){
    $('.spoiler_title').click(function() {
        return changeState('toggle');
    });
});

---

我建议将这个内联处理程序也移动到documentready块中，但这只是一个练习。它还允许您将changeState函数移到内部，并停止污染全局范围。

我看着小提琴，看不到这里发生了什么，也看不到您在问什么。你能再澄清一点吗？当你按下“打开所有负号”时，负号是负号，需要用加号进行更改，但这意味着当它已经展开时，单击“全部展开”就像关闭全部一样。我想这不是必需的。@ScottSauyet很可能不是，expand all/close all（全部展开/全部关闭）应该只是在切换器上，该切换器可以更改与此函数类似的文本。@ScottSauyet-还包括一个更新链接文本的演示。

<a href="#" id="expand_all">expand all</a>
        /
<a href="#" id="close_all">close all</a>
<a href="" class="spoiler_title">Title<span class="sp_ind">+</span></a>

<div class="spoiler_toggle">
    <div class="spoiler_bg">
        <p>artile</p>
    </div>
</div>

$('.spoiler_title').on("click", function(e){
    toggle();
    e.preventDefault();
});

$("#expand_all").on("click", function(e) {
    expand();
    e.preventDefault();
});

$("#close_all").on("click", function(e) {
    colapse();
    e.preventDefault();
});

var colapse = function() {
    var spoilerToggle = $(".spoiler_toggle");
    if(spoilerToggle.is(":visible")) {
        spoilerToggle.hide();
    }        
    $(".sp_ind").text("+");
};

var expand = function() {
    var spoilerToggle = $(".spoiler_toggle");
    if(!spoilerToggle.is(":visible")) {
        spoilerToggle.show();
    }     
    $(".sp_ind").text("-");
};

var toggle = function() {
    var toggleButton = $(".sp_ind");
    $(".spoiler_toggle").toggle();
    var text = toggleButton.text() === "+" ? "-" : "+";
    toggleButton.text(text);
};

<a class="expander" style="cursor:pointer; text-decoration: underline;">expand all</a>
    /
<a class="collapser" style="cursor:pointer; text-decoration: underline;">close all</a>

$(document).ready(function(){

  $(".expander").click(function(){
    $("div[class^='spoiler_toggle']").show();
    $(".spoiler_title .sp_ind").text('-');
  });    

  $(".collapser").click(function(){
    $("div[class^='spoiler_toggle']").hide();
    $(".spoiler_title .sp_ind").text('+');
  });    

  $('.spoiler_title').click(function(){
    $(this).find(".sp_ind").text(($(this).find(".sp_ind").text() == '+' ? '-' : '+'))
    $(this).parent().children('div.spoiler_toggle').toggle();
    return false;
  });
});

<a onclick="changeState('show')" ...>expand all</a>
<a onclick="changeState('hide')" ...>close all</a>

var changeState = (function() {
    var showing = false;
    return function(type) {
        if (type !== 'show' && type !== 'hide') { // 'toggle' or other
            type = showing ? 'hide' : 'show';
        }
        showing = (type === 'show');
        $("div[class^='spoiler_toggle']")[type]();
        $(".sp_ind").text(type === 'show' ? '-' : '+');
        return false;
    }
}());

$(document).ready(function(){
    $('.spoiler_title').click(function() {
        return changeState('toggle');
    });
});