Question

我有一排图像，当用户点击图像时，则选择该图像。如何设置在jquery中切换click事件，以便：

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

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

缓存经常使用的元素，例如$titles;
按class而不是[id^="tile-"]选择元素，这样会更有效率;
请勿使用css方法。请改用addClass。

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

在点击的元素之间切换

3 个答案: