I have a form set up where you use images to select items - and when an image is selected, it becomes highlighted by a border - however, I want to add another section of code that lets you click the same image to deselect it (instead of just clicking another image) - but I can't figure out how to do it myself! My code so far is written below, along with a jfiddle link to show what it does.
<div id="container">
<div id="sidebar">
<h2>Instructions</h2>
<br />To build your sword, select a blade, tsuba, saya, tsuka, as well as any accessories you may want to go along with your order - the sword itself will be shown below all the available options as you select them (please note that the blades will not be shown - a simple default blade will appear, but your blade option is still considered within your order) and if needed, you can also enter comments and/or feedback in the appropriate textbox at the bottom of the page! Hovering over the image of any item will bring up the price of the item, and clicking on the item will select it.</div>
<form name="customSword" method="post" id="swordForm">
<div id="shop">
<table class="custom" id="k-and-f" name="">
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/horseset_zps185b881c.jpg" data-value="kashira-1" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/dragonNo1_zps6215ac12.jpg" data-value="kashira-2" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/matis_zps9c427b6d.jpg" data-value="kashira-3" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/onimasks_zpsa279a84f.jpg" data-value="kashira-4" style="margin-right: 35px;" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/castflowers_zps14608b8c.jpg" data-value="kashira-5" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/flowers_zps873c43a4.jpg" data-value="kashira-6" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/japcoi2_zpsd6cd6823.jpg" data-value="kashira-7" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/CZropeandpalm_zps5c9ca959.jpg" data-value="kashira-8" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/IMG_2764_zps4f10741f.jpg" data-value="kashira-9" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/brasewaves_zps20dcc84b.jpg" data-value="kashira-10" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/castcoifish_zpsce3a07ce.jpg" data-value="kashira-11" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/castbird_zpsc6ab6baa.jpg" data-value="kashira-12" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/ninja_zpscf137d51.jpg" data-value="kashira-13" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/castwavessilv_zpsb3361e56.jpg?t=1374882863" data-value="kashira-14" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/octopie_zpsa0ecc0da.jpg?t=1374883535" data-value="kashira-15" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/clouddragonbro_zpsb7396560.jpg?t=1374883487" data-value="kashira-16" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/clouddragonsilv_zpscd55983b.jpg?t=1374883813" data-value="kashira-17" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/clouddragonset_zpsa66f670f.jpg?t=1374883849" data-value="kashira-18" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/dragonscaleset_zpsbe9aa47f2_zps6504302f.jpg" data-value="kashira-19" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/dragonset_zps1c640d0b.jpg?t=1374884395" data-value="kashira-20" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/snakeset_zps7f6aff25.jpg?t=1374884467" data-value="kashira-21" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/frogset_zps90b32fdb.jpg?t=1374884812" data-value="kashira-22" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/toadset_zps42662e7d.jpg" data-value="kashira-23" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/toadset_zps42662e7d.jpg" data-value="kashira-24" />
</td>
</tr>
<tr>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/geishaset_zpsff27037d.jpg" data-value="kashira-25" />
</td>
<td>
<img src="http://i1286.photobucket.com/albums/a604/Dragonsongforge/Kashira/shrimpset_zps4dcb497a.jpg" data-value="kashira-26" />
</td>
</tr>
<input type="hidden" id="image_value" name="selected-image" value="">
</table>
</div>
</form>
</div>
jQuery:
$(document).ready(function () {
$('#swordForm img').click(function () {
// Set the form value
$('#image-value').val($(this).attr('data-value'));
// Unhighlight all the images
$('#swordForm img').removeClass('highlighted');
// Highlight the newly selected image
$(this).addClass('highlighted');
});
});
You may try this ($('#image-value').val($(this).attr('data-value')); won't work)
$('#swordForm img').click(function () {
if($(this).hasClass('highlighted')){
$(this).removeClass('highlighted');
$('input:hidden').val('');
return;
}
$('input:hidden').val($(this).attr('data-value'));
$('#swordForm img').removeClass('highlighted');
$(this).addClass('highlighted');
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments