0

私のフォームには、複数の画像をリストする必要があります。ユーザーは、画像をクリックしてスウォッチを選択できる必要があります。画像の名前を以下のスクリプトにどのように渡しますか?

ドロップダウンメニューがどのように選択肢を提供し、「選択」部分に「ID」があり、「オプション」に値があるかを理解しています。しかし、画像ではどのように機能するのでしょうか? それぞれに一意のラベルを付ける方法はありますが、何らかの方法でスクリプトにそれらがすべて同じグループのオプションであることを知らせますか?

<img src="myimage_one.jpg">
<img src="myimage_two.jpg">
<img src="myimage_three.jpg">

それらはすべて「ラジオ」要素のように同じ ID を共有する必要があり、選択した ID がスクリプトを通じて送信される ID になりますか?

以下は、ドロップダウンの選択ごと、入力フィールドの入力ごとにトリガーされ、「オンクリック」が発生するたびにトリガーされるスクリプトです。基本的に、「select」要素と「input」要素は「doCalc();」に基づいて発火します。以下のスクリプトの一部。

スクリプトの理由は、各選択の合計を即座に自動計算し、特定の ID プレースホルダーに表示することです。

最後に、以下のスクリプトでわかるように、何らかの方法で値を myimage_str に関連付ける必要はありませんか?

var myimageX = $('#myimage_str').val();

        <script type="text/javascript">
            function doCalc(){
                var roomX = $('#room_str').val();
                var otherroomX = $('#other_room').val();
                var myimageX = $('#myimage_str').val();                 
                var heightX = $('#height_str').val();
                var heightfracX = $('#heightfrac_str').val();
                var widthX = $('#width_str').val();
                var widthfracX = $('#widthfrac_str').val();
                var prodid = $('#prodid').val();
                var qtyX = $('#qty_str').val();

                $.post('db_query.php',
                {qtyX:qtyX, roomX:roomX, otherroomX:otherroomX, myimageX:myimageX, heightX:heightX, heightfracX:heightfracX, widthX:widthX, widthfracX:widthfracX, prodid:prodid}, 
                function(data) {
                    data = $.parseJSON(data);
                    $('#width-placeholder').html(data.width);
                    $('#widthfrac-placeholder').html(data.widthfrac);
                    $('#height-placeholder').html(data.height);
                    $('#heightfrac-placeholder').html(data.heightfrac);
                    $('#realtime-price').html(data.totalprice);
                    $('#realtime-qty').html(data.qty);
                    $('#unitprice').html(data.unitprice);
                    $('#roomname').html(data.roomname);
                    $('#other_room-placeholder').html(data.otherroom);
                    $('#myimage-placeholder').html(data.myimage);
                    // ...
                });
                return false;
                };
        </script>

編集：あなたの提案ごとに追加されたコードは次のとおりです。まだ機能していません。画像をクリックしても何も起こりません。「alt」タグにattrを使用して、その中に画像名を付けてみました。var colorX = $('.ColorSelection').attr('alt');

        <script type="text/javascript">
                $('.ColorChoice').click(function(){
                    $('.ColorChoice').removeClass('ColorSelection');
                    $(this).addClass('ColorSelection'); 
                    doCalc()
                });
                function doCalc(){
                var roomX = $('#room_str').val();
                var otherroomX = $('#other_room').val();
                var colorX = $('.ColorSelection').attr('alt');  
//.....

ここにいくつかの画像があります...

<ul class="swatches">
  <li><div id="swatch"><img src="100_bright_white.jpg" alt="100_bright_white" class="ColorChoice"></div></li>
  <li><div id="swatch"><img src="101_pure_white.jpg" alt="101_pure_white" class="ColorChoice"></div></li>
  <li><div id="swatch"><img src="102_bone.jpg" alt="102_bone" class="ColorChoice">
//...</div></li>
4

3 に答える 3

1

すべての画像を同じように分類し、画像をクリックすると、クリックされたクラスが取得されます。次に、doCalc 関数でデータを取得します。次のようなものがうまくいくかもしれません

この例のために、画像はすべて .imgChoice として分類され、必要なものは .imgSelection です。

$('.imgChoice').click(function(){
    $('.imgChoice').removeClass('imgSelection');
    $(this).addClass('imgSelection');    
});

そして、値を取得するには

var myimageX = $('.imgSelection').attr('src');

これにより、ソース値/ファイル名が変数 myimageX に割り当てられます。それがあなたが探しているものではない場合は、私に知らせてください.

于 2012-06-22T02:51:00.457 に答える
0

フォームに、ユーザーが選択した画像の src 属性の値を保持する隠しフィールドを配置します。次に、スクリプトで（jQueryを使用していると仮定しています）：

$("img").click(function() {
    $("#myimage_str").val($(this).attr("src"));
});
于 2012-06-22T02:51:15.373 に答える
0

これを行うにはいくつかの方法があります。1 つは、画像のブロックを識別できる div で画像をラップすることです。

<div id="myimage_str">
  <img src="myimage_one.jpg">
  <img src="myimage_two.jpg">
  <img src="myimage_three.jpg">
</div>

次に、次の JavaScript を追加します (jQuery を使用していると想定しています)。

$('#myimage_str').click(function() {
   $('#myimage_str img').removeClass('selected');
   $(this).addClass('selected');
});

「doCalc」メソッドでは、次のように簡単に記述できます。

var myimageX = $('#myimage_str img.selected').attr('src');

または、共通のクラス名を付けて画像のブロックを識別することもできます。しかし、それをラップすると、画像の論理ブロックが見やすくなると思います (UI でのスタイリングの場合もそうなるでしょう)。

于 2012-06-22T02:52:00.223 に答える