Tabraiz Ali Tabraiz Ali - 6 months ago 10
jQuery Question

Toggle between borders of a image and remove borders of other existing images

Context



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

Now many images can be selected like that:

enter image description here

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

GG. GG.
Answer

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