Question

My php script puts an image with a hidden checkbox for that image. When the image is clicked, its checkbox is set to checked. I want then to place a outline around the image to show the image is selected without the need for showing ugly checkboxs. To do this i have created a php var called $i that increments for each outputted image to act as the images id, the id is then passed into a Javascript function and called as a jquery selector.

All this works fine, but when the toggleClass event is called it act’s in a way i have never experienced before. It doesn’t fire on the first click, but the second resulting in the highlighting of the image to be done out of sync with the checking of the checkbox i.e.

image > click = no highlight || checkbox checked.

image > second click = image highlighted || checkbox un-checked.

if the addClass event is called this then works, highlighting on the first click. But when rewritten to remove the highlighting on the second click the original problem is back. (i did this using an if else statement with .hasClass(), if had the class ‘highlight’ remove it, else addclass highlight…)

It doesn’t seem to be a problem with the variables, as replacing these with just the number 1 in the HTML & JS the problem still exists.

Right on with the code i am using:

(for the example lets say the php var $i is 1 as it seems a little pointless to write out for loops ect when this part is working fine [also the href=”” of the anchor will be prevented from being followed when a button is clicked, thus making the highlighting possible, this code isn’t written yet so it isn’t causing issues, i just removed href=” for testing])

HTML / PHP

// for this exmaple $i = 1;
// $id is the images unique id, the one used in the server for the image path


<a class='selectbox' id='hil' style='position:relative;' href='show-image.php?id=$id'>
    <div style='display:inline-block; padding:15px;' id=\"$i\" onclick=\"highlight('" . $i . "')\"  class='lifted drop-shadow-sq' >
        <label for=\"$id\">
            <img class='reflect reflect-br' width='150px;' height='150px' src=\"thumb.php?id=$id\">
        </label>
            <input id=\"$id\" style='display:non;' type='checkbox' class=\"show-man\" name='images[]' value='$id'>
    </div>
</a>

Jquery

function highlight(x) { 
id = x;
    $('#' + id).click(function() {
        $(this).toggleClass('highlight');
    });
}

CSS

.highlight img {
box-shadow:0 0 10px #5bb1ce;
}

Thanks for any replies in advance.

Answer 1

Right, after a few hours of head scratching and hair pulling i have come to a solution. It seems the i was using to check and un-check the checkbox was causing the issue. Not to sure why though?

So i removed this and created a simple Jquery function for the highlighting. (To credit Zefiryn this is a slight modification of his reply.)

$(document).ready(function(){
    $(".lifted").live('click', function() {
        $(this).toggleClass("highlight");
    });
});

I then removed the tags from the html and replaced them with a JavaScript function using the images unique id in the id of the checkbox to check/un-check the checkbox.

<div style='display:inline-block; padding:15px;' id=\"$i\" onclick=\"if (event.target.tagName != 'INPUT') document.getElementById('$id').checked = !document.getElementById('$id').checked\"  class='lifted drop-shadow-sq' >
    <img class='reflect reflect-br' width='150px;' height='150px' src=\"thumb.php?id=$id\">
        <input id=\"$id\" style='display:none;' type='checkbox' class=\"show-man\" name='images[]' value='$id'>
</div>

The css stayed the same.

All now seems sorted and is working fine, lastly i must thank Zefiryn for the help above.