1

このコードでクリック時に境界線の色を変更して、選択/選択解除の画像を作成しようとしています

var $box=null;

$('img')
    .click(function() {
        if ($box == null) {
            $box = $(this);
            $box.css("border","5px solid green");
        } else  {
            $box.css("border","5px solid white");
            $box = null;
        }
    }
);

同じ画像を選択して選択解除して選択しようとする場合を除いて、コードは正常に機能しています。ワンクリックで別の画像を選択したい。

確認してみましたがうまくいきif ($box == $(this))ません。

4

5 に答える 5

4

代わりにクラスを使用し、必要に応じてクラスを切り替えます。このソリューションは、ラジオ ボタンのように機能します (一度に 1 つの画像のみに境界線を付ける) が、アクティブな画像の選択を解除することもできます。

http://jsfiddle.net/6cGVz/

$('img').click(function() {
    var $this = $(this);
    if ($this.hasClass('active')) {
        $this.removeClass('active');
    } else {
        $('.active').removeClass('active');
        $this.addClass('active');
    }
});
于 2013-08-21T13:20:25.260 に答える
1

説明

$boxがクリックされた要素かどうかを確認します。ある場合は、境界線がある場合は非表示にします。それ以外の場合は、クリックした要素に境界線を配置してください!

ソリューション (ライブデモ)

JavaScript/JQuery

var $box=null;

$('img')
    .click(function() {
        if ($box == null) {
            $box = $(this);
            $box.css("border","5px solid green");
        } else  {
            $box.css("border","5px solid white");
            if($box != $(this))
            {
                $box = $(this);
                $box.css("border","5px solid green");
            }
            else
                $box = null;
        }
    }
);
于 2013-08-21T13:17:48.717 に答える
1

あなたの質問のために、すべての画像をコンテナに入れます：

<div id='setOfImages'>
    <img ... >
    <img ... >
    <img ... >
    <img ... >
</div>

クラスを切り替えます。

$('#setOfImages > img').click(function() {
    'use strict';

    if($(this).hasClass('selected')) {
        // Deselect currently selected image
        $(this).removeClass('selected');
    } else {
        // Deselect others and select this one
        $('#setOfImages > img').removeClass('selected');
        $(this).addClass('selected');
    }
});

そしてあなたのCSSで：

#setOfImages > img {
    border: 5px solid #fff;
}

#setOfImages > img.selected {
    border: 5px solid green;
}

jsFiddle デモを参照してください。

于 2013-08-21T13:19:32.627 に答える
0

外部のものに頼るのではなく、画像自体にデータ属性を追加できます。

$('img')
    .click(function() {
        var img = $(this);
        if (! img.data('box')) {
            img.css("border","5px solid green");
            img.data('box', true);
        } else  {
            img.css("border","5px solid white");
            img.data('box', false);
        }
    }
);

実際の例: http://codepen.io/paulroub/pen/qbztj

于 2013-08-21T13:17:56.517 に答える