修改擾流板

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

更改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 2

使用.text()回調函數集+或 - ：

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

每@ ScottSauyet的評論，這裏是一個更新的演示更新您的鏈接文本：http://jsfiddle.net/VWCnd/16/

Answer 3

如果你打算使用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 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函數，並停止污染全球範圍。）