使用jQuery改變預規劃

我的jQuery至今：使用jQuery改變預規劃

jQuery(document).ready(function($) { 

    $(".spoiler").hide(); 
    $(".spoiler-title").prepend('+ '); 

    $('.spoiler-title').bind('click', function(){ 
     $(".spoiler-title").prepend('- '); 
     $('.spoiler').animate({height: 'toggle'}, 100); 

    }); 

});

所以，很顯然它錯了，因爲每次你點擊它只是要添加一個「 - 」，它不會刪除舊的「+」前面加上。那麼你如何刪除新的前置並將其返回到原始的'+'？

感謝您的幫助！

來源

2013-01-10 Colton Allen

你爲什麼不添加一個單獨的''和控制無論是+或 - ，而不是每次串聯字符串？ – Codeman

因爲我不是很好的jQuery，所以我從來沒有考慮過它：P –

那麼這可能是一個更好（更快）的解決方案，您的問題:)更容易管理事件。 – Codeman

試試這個：

jQuery(document).ready(function($) { 

    $(".spoiler").hide(); 
    $(".spoiler-title").prepend('<span class="prependedSign plus">+ </span>'); 

    $('.spoiler-title').bind('click', function(){ 
     if($(".prependedSign").hasClass("minus")) 
     { 
      $(".prependedSign").remove(); 
      $(".spoiler-title").prepend('<span class="prependedSign plus">+ </span>'); 
     } 
     else 
     { 
      $(".prependedSign").remove(); 
      $(".spoiler-title").prepend('<span class="prependedSign minus">- </span>'); 
     } 
     $('.spoiler').animate({height: 'toggle'}, 100); 

    }); 

});

來源

2013-01-10 02:05:08

太棒了！但它並不完全符合我需要的一切。點擊後，加號消失，減號出現，但再次點擊（關閉擾流板）不會刪除減號並恢復加號。 –

我已經更新它來做你的要求。基本上，它現在檢查它是否具有「minus」類，如果是，則會添加一個加號。如果不是，那麼它會添加一個減號。如果您有任何問題，請告訴我。 –

優秀！非常感謝你。 –

PYou可以繼續使用前置但由於跨度的內容將是一個eather +或 - ，你可以使用像$('.spoiler-title span').text('+ ');和比的.text改變它（」 - '）。

請考慮下面的代碼，並根據需要進行更改：

(function($){ $(function(){ 
    $('.spoiler-title').click(function(){ 
    $(this).toggleClass('minus').next('.content').slideToggle(); 
    if($(this).hasClass('minus')){ 
     $(this).children().text('- '); 
    } else { $(this).children().text('+ '); } 
    }); 
}); })(jQuery);

我不知道你有什麼就有什麼，但這裏是一個working fiddle，所以你可以看到我是如何做的。希望對你有幫助！另外請注意，我沒有使用$（document）.ready（）。這個改變對代碼沒有影響，但它會以相同的方式工作，並且它是「無衝突」的，所以請改用它。還有其他方法可以避免「$」衝突，但這是我個人使用的方式。

來源

2013-01-10 02:08:02 rafaelbiten

它幾乎奏效。點擊後，加號消失，減號出現，但再次點擊（關閉擾流板）不會刪除減號並恢復加號。感謝您的幫助。 –

我會更新此答案... – rafaelbiten

試試這個

jQuery(document).ready(function($) { 

     $(".spoiler-title").text('+ '); 
     $(".spoiler").hide(); 

     $('.spoiler-title').bind('click', function(){ 

      if($(this).text().indexOf("- ") > -1) 
      { 
        $(this).text('+ '); 
        $(".spoiler").hide(); 
      } 
      else 
      { 
        $(this).text('- '); 
        $(".spoiler").animate({height: 'toggle'}, 100);    
      } 

     }); 

    });

來源

2013-01-10 03:35:11

使用jQuery改變預規劃

回答

相關問題