在切换时更改锚标记内的文本？

Question

I have the following:

So right now I'm toggling ul.children like this:

$('a.expand-cat-item').on('click', function() {
  $(this).closest('li.cat-item').find('ul.children').toggle('slow');
});

Now, I would also change the + sign into a - sign inside a.expand-cat-item (which will work as a toggle too).

How to accomplish that?

Answer 1

You can use condition operator ? : ? : to make a text switch condition.

$('a.expand-cat-item').on('click', function() {
  $(this).closest('li.cat-item').find('ul.children').toggle('slow');
  $(this).text($(this).text() == "+" ? "-" : "+");
});

Answer 2

Try

$('a.expand-cat-item').on('click', function() {
  $(this).closest('li.cat-item').find('ul.children').toggle('slow');
  if ($(this).text() == '+ '){
      $(this).text('- ');
  }
  else{
      $(this).text('+ ');
  }
});

Answer 3

用这个：

$('a.expand-cat-item').text("- ");

Answer 4

$('a.expand-cat-item').on('click', function() {
  var $this = $(this);
  $this.closest('li.cat-item').find('ul.children').toggle('slow');
   var html = '+';
   if($this.html().indexOf('+') > -1){
       html = '-';
   }
   $this.html(html);
});