0

環境

画像を 1 枚だけ選択し、既存の他の画像の境界線を削除したい

多くの画像を次のように選択できるようになりました。

ここに画像の説明を入力

単一の画像の選択と選択解除についてサポートが必要です。

私のコード

function clickpick(item) {

    for ( var i = 5; i < document.images.length; i++) {
        
        document.images[i].onclick = function() {
        
        if (this.style.borderWidth == '5px') {
            selectpic = '';
            $("#display-frame").find("*").css("border", "0");
        } else {
            this.style.border = '5px solid blue';
            selectpic = $(item).attr("url");
        }

    };
}

画像は自動生成されます

HTML

<div class="mainpic"><img src="';path+=file.filepath+'" class="uploader-thumb-img" style="width: 108px; height: 120px; top: 0px; left: 0px; "/></div>

更新: 画像の URL を選択したいのですが、言い忘れました。

4

3 に答える 3

2

解決

jQuery.toggleClass()関数を使用。

CSS :

img { border: 0; }
img.highlight { border: 5px solid blue; }

JavaScript :

var url;

$('img').click(function (e) {
    $('img.highlight').not(e.target).removeClass('highlight');
    $(this).toggleClass('highlight');
    url = $(this).attr('href');
});​

デモ

http://jsfiddle.net/7FAjD/2

于 2012-07-25T11:40:54.237 に答える
1

一度に 1 つの画像だけを選択したい場合は、次のような方法を試すことができます。

var $images = $('img');

$images.click(function () {
    $images.removeClass('highlight');
    $(this).addClass('highlight');
});
于 2012-07-25T11:57:01.387 に答える
0

または、次のようなものを試すことができます。

<img src="http://www.placehold.it/200x200&text=5" onclick="clickpick(this)" />

JS:

function clickpick(item) {

        if (item.style.borderWidth == '5px') {
            item.style.border = '2px solid red';
        } else {
            item.style.border = '5px solid blue';
        }

}

これは更新されたフィドルです。

于 2012-07-25T11:47:39.533 に答える