Question

我想在点击事件中将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');
});

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

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

Answer 2

您使用#cool选择器和点击更改课程为＆＃34; this＆＃34;死者。在这种情况下，this只有一个死亡"i"元素。此元素的类已更改。

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

Answer 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 ＆amp;每次点击都是相反的，然后首先检查现有的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')
    }
});

难以理解javascript切换类

3 个答案: