單擊圖像和邊框消失

我有一個表單設置您使用圖像來選擇項目 - 當圖像被選中時，它會被邊框突出顯示 - 但是，我想添加另一段代碼，讓您點擊相同的圖像來取消選擇它（而不是僅僅點擊另一個圖像） - 但我無法弄清楚如何自己做！我的代碼到目前爲止寫在下面，以及一個jfiddle鏈接來顯示它的功能。單擊圖像和邊框消失

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

來源

2013-07-27 Tai M.

你可以試試這個（$('#image-value').val($(this).attr('data-value'));將無法正常工作）

$('#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'); 
});

DEMO.

來源

2013-07-27 01:48:27

謝謝你的工作，就像一個魅力！：D –

不客氣:-) –

$(document).ready(function() { 
    $('#swordForm img').click(function() { 
     if $(this).hasClass('highlighted') $('input:hidden').val(''); 
     else { 
      $('input:hidden').val($(this).attr('data-value')); 
      // Unhighlight all the images 
      $('#swordForm img').removeClass('highlighted'); 
     } 

     $(this).toggleClass('highlighted');    
    }); 
});

編輯：我錯了有關數據的價值，這要歸功於謝赫對沒收。

來源

2013-07-27 01:39:14 Trojan

不要忘記清除表單值，如果您通過單擊取消選定的圖像。在'if $（this）.hasClass'''突出顯示''）中，將其更改爲以下的'{$（this）.removeClass（'highlight'）; $（'＃image-value'）.val（''）; '}。 – emgee

感謝您的支持！ – Trojan

單擊圖像和邊框消失

回答

相關問題