jquery - 使用 jQuery 更改前置

Question

到目前为止我的 jQuery：

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

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

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

    });

});

所以很明显它是错误的，因为每次你点击它只会添加一个'-'并且它不会删除旧的'+'前置。那么你将如何删除那个新的前置并将它返回到原来的'+'？

谢谢你的帮助！

Answer 1

试试这个：

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

    });

});

Answer 2

P您可以继续使用 prepend，但由于该跨度的内容将是 + 或 -，您可以使用类似的东西$('.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);

我不知道你那里有什么，但这是一个工作小提琴，所以你可以看到我是怎么做到的。希望对你有帮助！另请注意，我没有使用 $(document).ready()。此更改对代码没有影响，但它将以相同的方式工作并且它是“无冲突​​”的，因此请开始使用它。还有其他方法可以避免“$”冲突，但这是我个人使用的一种。

Answer 3

试试这个

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

        });

    });