1

我有一个表单设置在您使用图像选择项目的位置 - 选择图像时，它会被边框突出显示 - 但是，我想添加另一部分代码，使您可以单击相同的图像以取消选择（而不是）只是单击另一张图片）-但我自己不知道该怎么做！到目前为止，我的代码写在下面，还有一个 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');
    });
});
4

2 回答 2

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

编辑：我对数据值的看法是错误的，感谢 Sheikh 抓住了这一点。

于 2013-07-27T01:39:14.107 回答
0

你可以试试这个（$('#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');
});

演示。

于 2013-07-27T01:48:27.940 回答