Jquery 单击图像，边框消失

我已经设置了一个表单，您可以使用图像来选择项目-当选择一个图像时，它会被边框高亮显示-但是，我想添加另一段代码，让您可以单击同一个图像来取消选择它（而不是仅仅单击另一个图像）-但是我自己不知道如何做！到目前为止，我的代码写在下面，还有一个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>

编辑：我对数据值的看法是错误的，多亏谢赫捕捉到了这一点。

你可以试试这个（

$（“#图像值”）.val（$（this.attr（'data-value'））；

不起作用）

---

如果通过单击取消选择所选图像，请不要忘记清除表单值。在

if$（this）.hasClass（'highlighted'）

中，将其更改为以下

{$（this）.removeClass（'highlighted'）；$（'image value'）.val（''）；

}。感谢您的关注！

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

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

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