Question

我想在用户点击链接时更改链接左侧的图标，但我无法让代码生效。我想我可能有JQuery选择的错误元素。

HTML

<div class="panel panel-default panel_sanpham">
    <div class="panel-heading">
        <h3 class="panel-title">Danh mục sản phẩm</h3>
    </div>
    <div class="panel-body">
        <ul class= "nav nav-pills nav-stacked">
            <li><a href= "#"><i class= "glyphicon glyphicon-play"></i>Laptop</a></li> 
            <li><a href= "#"><i class= "glyphicon glyphicon-play"></i>Máy tính bảng</a></li>
            <li><a href= "#"><i class= "glyphicon glyphicon-play"></i>Điện thoại di động</a></li>
            <li><a href= "#"><i class= "glyphicon glyphicon-play"></i></i>Bộ đàm</a></li>
            <li><a href= "#"><i class= "glyphicon glyphicon-play"></i></i>Phụ kiện</a></li>
            <li><a href= "#"><i class= "glyphicon glyphicon-play"></i>Tổng đài</a></li>
            <li><a href= "#"><i class= "glyphicon glyphicon-play"></i>Router</a></li>
        </ul>
    </div>

的Javascript

$(document).ready(function(){   
    $('.panel_sanpham > li').toggle(function(){
        $('.panel_sanpham > i').removeClass('.glyphicon-play').addClass('.glyphicon-ok');
    }, function(){
        $('.panel_sanpham > i').removeClass('.glyphicon-ok').addClass('.glyphicon-play');
    })
});

Answer 1

toggle() 用于显示或隐藏元素，它将在显示状态之间切换。您可以将 toggleClass() 与空格分隔的类名一起使用。它将切换班级

＆＃13;

$('.panel_sanpham li').click(function() {
  $(this).find('i').toggleClass('glyphicon-play glyphicon-ok');
});

＆＃13;

.glyphicon-play {
  display:inline-block;
  width: 10px;
  height: 10px;
  background: red;
}
.glyphicon-ok {
  display:inline-block;
  width: 10px;
  height: 10px;
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default panel_sanpham">
  <div class="panel-heading">
    <h3 class="panel-title">Danh mục sản phẩm</h3>
  </div>
  <div class="panel-body">
    <ul class="nav nav-pills nav-stacked">
      <li><a href="#"><i class= "glyphicon glyphicon-play"></i>Laptop</a>
      </li>
      <li><a href="#"><i class= "glyphicon glyphicon-play"></i>Máy tính bảng</a>
      </li>
      <li><a href="#"><i class= "glyphicon glyphicon-play"></i>Điện thoại di động</a>
      </li>
      <li><a href="#"><i class= "glyphicon glyphicon-play"></i>Bộ đàm</a>
      </li>
      <li><a href="#"><i class= "glyphicon glyphicon-play"></i>Phụ kiện</a>
      </li>
      <li><a href="#"><i class= "glyphicon glyphicon-play"></i>Tổng đài</a>
      </li>
      <li><a href="#"><i class= "glyphicon glyphicon-play"></i>Router</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

您可以使用ToggleClass()：

您在http://jsfiddle.net/z3kt0dey/的工作演示

$('.panel_sanpham li').click(function() {
 $(this).find('i').toggleClass('glyphicon-play glyphicon-ok');
});

Answer 3

现在我想在点击时更改图标，但其余的链接仍然保持不变我有这样的jquery代码：

$('.panel_sanpham li').click(function(){
            $('.panel_sanpham li').find('i').removeClass('glyphicon-ok').addClass('glyphicon-play');
            $(this).find('i').removeClass('glyphicon-play').addClass('glyphicon-ok');
        })

我的代码可以更清洁吗？

Jquery更改图标

3 个答案: