在单击的元素之间切换

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/