jquery - 在单击的元素之间切换

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。

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

使您的代码更简单、更高效的改进：

• 缓存经常使用的元素，例如$titles；
• class通过而不是选择元素[id^="tile-"]，这样会更高效；
• 不要使用css方法。改为使用addClass。

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