-2

有一个鳕鱼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;
 });
});

谢谢你们帮助菜鸟:)

4

4 回答 4

0

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

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

根据@ScottSauyet 的评论，这里有一个更新的演示也更新了您的链接文本：http: //jsfiddle.net/VWCnd/16/

于 2013-08-22T17:31:37.887 回答
0

如果您要使用 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/

于 2013-08-22T17:44:56.337 回答
0

对 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;
  });
});
于 2013-08-22T17:45:22.153 回答
0

这是一种可能适合的方法：

<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 函数移动到内部并停止污染全局范围。）

于 2013-08-22T18:09:41.843 回答