Jquery change icon

Question

I want to change the icon on the left of the link when the user clicks on it, but I can't get the code to work. I think I may have the wrong element selected by 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

Now i want to change the icon when click but the rest of the links still remain the same i have my jquery code like this:

$('.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');
        })

can my code be more cleaner?

Answer 2

toggle() is using for display or hide an element, it will toggle between display state. You can use toggleClass() with space separated class names. It will toggle the class

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

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

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

Answer 3

You can use ToggleClass() for this:

Your Working Demo at http://jsfiddle.net/z3kt0dey/

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