0

画像の行があります。ユーザーが画像をクリックすると、その画像が選択されます。jqueryでクリックイベントを切り替えて、次のようにするにはどうすればよいですか？

1）一度に選択できる画像は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);
    });
});
4

3 に答える 3

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はここで確認できます。

于 2013-02-06T13:33:02.537 に答える
0

使用する.siblings()

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

こちらのデモhttp://jsfiddle.net/BY9Fp/11/

于 2013-02-06T13:33:31.133 に答える
0

コードの改善されたバージョン：

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/

于 2013-02-06T13:36:08.760 に答える