Question

Context

I want to select only one image and remove borders of other existing images

Now many images can be selected like that:

I want help on select and deselecting single images.

My code

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

    };
}

Images are auto generated

Html

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

update:
i want to select the url of the image sorry forgot to mention that

Answer 1

Solution

Using jQuery .toggleClass() function.

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

Demo

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