Question

嘿伙计们，我在这里有jQuery内容切换设置：http://jsfiddle.net/DTcHh/848/

我正在尝试删除包含plus glyphicon的span的类，并在内容可见时将其替换为minus glyphicon。

这是我的jQuery：

$(document).ready(function () {

    $('#toggle-view li').click(function () {

        var text = $(this).children('div.panel');

        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');     
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');     
        }

    });

});

这是我的HTML：

<ul id="toggle-view">
    <li class="li-toggle">
        <h3 class="toggle-h3">Title 1<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h3>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
        </div>
    </li>
</ul>

我已尝试实现此代码以尝试删除加号字形并将其替换为减号字形但是我无法使其工作：

$(this).children('span')removeClass(glyphicon glyphicon-plus glyph-plus-toggle).addClass(glyphicon glyphicon-minus glyph-minus-toggle);

知道我哪里错了吗？

谢谢：）

Answer 1

addClass和removeClass函数需要字符串，以了解您正在谈论的类。通过在文本周围加上引号来声明字符串。因为缺少那些，它现在认为那些是变量，它们不是。

除此之外，您在removeClass之前错过了一个点。

试试这个：

$(this).children('span').removeClass("glyphicon glyphicon-plus glyph-plus-toggle").addClass("glyphicon glyphicon-minus glyph-minus-toggle");

编辑：我更改了它，并且它有效：See the fiddle

问题在于你使用.children()。我用.find()更改了它。取自this页面：

.children（）方法与.find（）的不同之处在于.children（）只沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子等）同样。

由于您所寻找的元素不是直接的孩子，因此他们没有被选中。

Answer 2

<强>问题：

您将removeClass放在children（）函数后面，而不使用点。
您没有为字符串使用括号（“或”）。
您尝试通过使用空格分隔类来一次删除/追加多个类。我不认为这是可能的。

另外，你把一个数字放在一个字符串中，这是不必要的。如果你想要一个整数，你不需要使用括号。

Answer 3

我不确定.children（）方法......

您可以像这样尝试find（）并使用.addClass（“classname”）或.removeClass（“classname”）。注意 ”。” （点）不需要。

$(document).ready(function () {

  $('#toggle-view li').click(function () {

    var text = $(this).children('div.panel');

    if (text.is(':hidden')) {
        text.slideDown('200');
        $(this).find('span').removeClass("glyphicon-plus");
        $(this).find('span').addClass("glyphicon-minus");   
    } else {
        text.slideUp('200');
        $(this).find('span').addClass("glyphicon-plus");
        $(this).find('span').removeClass("glyphicon-minus");
    }

 });
});

删除类添加类问题

3 个答案: