Question

有一个鳕鱼http://jsfiddle.net/VWCnd/8/。如何执行以下操作：当按下“全部打开”时，所有+都改为 - ？

HTML：

<a onclick=$("div[class^='spoiler_toggle']").show() style="cursor:pointer; text-decoration: underline;">expand all</a>
        /
<a onclick=$("div[class^='spoiler_toggle']").hide() style="cursor:pointer; text-decoration: underline;">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>

的CSS：

.spoiler_title {
    display:block;
    background-color: #551A8B;
    color: #fff;
    padding: 10px 10px;
}
.spoiler_toggle {
    display:none;
}
.sp_ind{
    float: right;
    margin-right: 10px;
}
.spoiler_bg {
    background: #9C6AC9;
    padding: 1px 10px;
}

JS：

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

谢谢你们帮助新手：）

Answer 1

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

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

Per @ ScottSauyet的评论，这是更新链接文本的更新演示：http://jsfiddle.net/VWCnd/16/

Answer 2

如果您打算使用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>

以下是您的jquery的外观：

$('.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);
};

这是你的小提琴：http://jsfiddle.net/VWCnd/15/

Answer 3

对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>

使用Javascript：

$(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;
  });
});

Answer 4

这可能适合 an approach ：

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

我建议将这个内联处理程序移动到文档就绪块中，但这仍然是一个练习。（它还允许您在内部移动changeState函数并停止污染全局范围。）

修改扰流板

4 个答案: