如何'切換'在JQuery頁面上點擊多個元素？

Question

可以說我的網頁上有10個紅色，他們有相同的班級，名字叫'myspan'。

以下是我想要的： 單擊一個元素，然後單擊的元素將其顏色更改爲綠色。

我所做的：

<script> 
    $(document).ready(function(){ 
     $('.myspan').click(function(){ 
      aaa = !aaa; 
      if(aaa){ 
       $(this).css('color','green'); 
      } else { 
       $(this).css('color','red');   
} 
    }); 
}) 
</script> 

這工作！它幾乎達到我想要的。當我點擊一個元素時，它會成功更改爲綠色。但是我必須點擊兩次才能使另一個紅色元素變成綠色。我希望你們知道我的意思，如果你看代碼。有沒有人有任何關於如何解決問題的想法？

Answer 1

你需要爲每個跨度的狀態分別所以不是使用一個共同的變量，你可以使用。數據（）API像

$(document).ready(function() { 
    $('.myspan').click(function() { 
     var $this = $(this), 
      aaa = $this.data('aaa'); 
     aaa = !aaa; 
     $this.css('color', function() { 
      return aaa ? 'green' : 'red'; 
     }) 
     $this.data('aaa', aaa); 
    }); 
}) 

演示：Fiddle

Answer 2

試試下面的代碼

<script> 
    $(document).ready(function(){ 
     $('.myspan').click(function(){ 
      var colorVal = $(this).css('color'); 
      if(colorVal === 'red'){ 
       $(this).css('color','green'); 
      } else { 
       $(this).css('color','red');   
} 
    }); 
}) 
</script> 

Answer 3

您可以使用.toggleClass() instead.Try這樣的：

$(".myspan").click(function() { 
    $(this).toggleClass("red"); 
}); 

CSS：

.myspan{ color: green; } 
.myspan.red{ color: red; } 

Working Demo

Answer 4

你會過得更好使用toggleClass

<span class="myspan">Test</span>

JQuery的：

$('.myspan').click(function() { 
    $(this).toggleClass("green"); 
}); 

CSS：

.myspan{ 
    color: red; 
} 
.green { 
    color: green 
} 

Example

Answer 5

爲腳本的功能是要指出，簡單的我不會用任何變量，只要。最好嘗試這樣的：

的Javascript：

$(document).ready(function() { 
    $('.myspan').click(function() { 
     if ($(this).hasClass('color-red')) { 
      $(this).removeClass('color-red').addClass('color-green'); 
     } else { 
      $(this).removeClass('color-green').addClass('color-red'); 
     } 
    }); 
}) 

CSS：

.myspan { 
} 
.color-red { 
    color:red; 
} 
.color-green { 
    color:green; 
} 

工作小提琴：http://jsfiddle.net/2729p/

這節省了需要使用狀態保存變量，使得它更模塊化。