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

編集：それをキャッチしてくれたシェイクに感謝します。

于 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 に答える