在單擊的元素之間切換

Question

我有一排圖像，當用戶單擊圖像時就會選擇該圖像。如何管理切換jQuery中點擊事件，以便：

1）只有一個圖像可以在如果所選的圖像上點擊則取消時間
2）被選中。

這裏是我到目前爲止，有小提琴：http://jsfiddle.net/jamiefearon/BY9Fp/1/

$(document).ready(function() { 

    var selectedTile = null; 

    $('[id^="tile-"]').click(function() { 
      $(this).css("background", "red"); 
      $(this).css("opacity", "0.4"); 
      selectedTile = $(this).attr("name"); 
      console.log(selectedTile); 
    }); 
}); 

Answer 1

我會移動的樣式合併到一個CSS類，如下所示：

.tile_wrap.selected { 
    background: red; 
    opacity: 0.4; 
} 

然後進行單擊處理類似：

var tiles = $('.tile_wrap'); 
$('[id^="tile-"]').click(function() { 
    if($(this).hasClass('selected')) 
    { 
     $(this).removeClass('selected'); 
    } 
    else 
    { 
     tiles.removeClass('selected');  
     $(this).addClass('selected'); 
     selectedTile = $(this).attr("name"); 
     console.log(selectedTile); 
    } 
}); 

您可以看到更新的jsFiddle here。

Answer 2

使用.siblings()

  $(this).siblings().css({background:"",opacity:1}); 
     $(this).css({"background": "red","opacity":"0.4"}); 

演示這裏http://jsfiddle.net/BY9Fp/11/

Answer 3

代碼的改進版本：

var $tiles = $('.tile_wrap'); 
$tiles.click(function() { 
    $(this).toggleClass('active'); 
    $tiles.not(this).removeClass('active'); 
}); 

改進使您的代碼simplier，更高效：

• 緩存常用元素，例如$titles;
• 通過class而不是[id^="tile-"]選擇元素，這樣會更有效率;
• 請勿使用css方法。改爲使用addClass。

http://jsfiddle.net/dfsq/BY9Fp/8/