难以理解 javascript 切换类答案

【问题标题】：Difficulty understanding javascript toggle class难以理解 javascript 切换类
【发布时间】：2016-08-02 10:22:12
【问题描述】：

我想在点击事件时将 glyphicon-plus 更改为 glyphicon-minus。这是我的代码

<?php foreach (get_categories() as $category){ ?>
            <div class = "sidebar_menu" >
                <li class="<?php echo $active = ($i==1)?"active":""; ?>"><a href="<?php echo get_category_link(get_cat_ID( $category->name )); ?>" ><strong><?php echo $category->name;?> </strong></a></li>
                <div class = "floatright">
                    <li  id="cool">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i; ?>">
                            <i class="glyphicon glyphicon-plus"  aria-hidden="true"></i>
                        </a>
                    </li>
                </div>
            </div>

还有js。

$('#cool').click(function(){
    $(this).find('i').toggleClass('glyphicon-plus').toggleClass('glyphicon-minus');
});

它仅适用于第一个列表项，而我需要使其适用于所有列表项。

【问题讨论】：

请添加 HTML 代码而不是 PHP。会更容易理解。这是更多的 jquery 而不是 wordpress 问题。
@kuldeep-sharma 问题需要更多改进。您想在单击任何单个列表项时更改所有列表项，还是只想在单击的列表项上将 glyphicon-plus 更改为 glyphicon-minus 和反之亦然?

标签： javascript wordpress twitter-bootstrap

【解决方案1】：

我如何设法解决这个问题：这是我的代码

  <div class = "floatright">
            <li>
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i; ?>">
                    <span><i class="cool glyphicon <?php echo $active = ($i==1)?"glyphicon-minus":"glyphicon-plus"; ?>"  aria-hidden="true"></i></span>
                </a>
            </li>
        </div>

和js

$('.cool').click(function(){
    if($(this).hasClass('glyphicon-plus'))
    {
        $(this).removeClass('glyphicon-plus').addClass('glyphicon-minus');
    } else {
        $(this).removeClass('glyphicon-minus').addClass('glyphicon-plus');
    }});

【讨论】：

【解决方案2】：

您使用#cool 选择器并在单击时更改“this”死者的类别。在这种情况下，this 只有一个死者"i" 元素。此元素的类已更改。

在这种情况下，使用 HTML 代码会更方便。我们不知道这里的 $categories 和其他 PHP 变量是什么，因此这使得回答问题变得更加困难。

【讨论】：

我的java脚本很差。所以我必须做什么
首先在您的问题中添加 HTML。

【解决方案3】：

首先，您必须将ID 替换为class，因为ID 应该是唯一的。所以你的 html 会是这样的：

<div class = "sidebar_menu" >
    <li class="<?php echo $active = ($i==1)?"active":""; ?>"><a href="<?php echo get_category_link(get_cat_ID( $category->name )); ?>" ><strong><?php echo $category->name;?> </strong></a></li>
    <div class="floatright">
        <li class="cool">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i; ?>">
                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
            </a>
        </li>
    </div>
</div>

如果您想在每次点击时将 glyphicon-plus 更改为 glyphicon-minus 并且反之亦然，那么首先检查现有的 glyphicon。然后可以在当前 glyphicon 的基础上执行所需的功能。所以 JavaScript 会是这样的：

$('.cool').click(function(){
    var plus = $("#basic-addon1").find('.glyphicon-plus');
    var plusExistence = $(plus).length;
    if (plusExistence > 0){
        $(plus).removeClass('glyphicon-plus');
    }else{
        $("#basic-addon1").find('.glyphicon').addClass('glyphicon-minus')
    }
});

【讨论】：

感谢#mambro 的帮助，但它对我不起作用。