0

我的表单需要列出多个图像。用户需要能够单击图像来选择他们的样本。你如何将图像的名称传递给下面的脚本？

我了解下拉菜单如何提供选择，“选择”部分有一个“id”......“选项”有一个值。但它如何处理图像？有没有办法给每个人一个唯一的标签，但以某种方式让脚本知道它们都是同一组的选项？

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

它们是否都需要像“ radio ”元素一样共享相同的身份，然后您选择的那个成为通过我的脚本发送的 ID？

下面是我的脚本，它会为每个下拉选择、每个填写的输入字段触发，并且应该针对发生的每个“onclick”。所以基本上，“ 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>

编辑：这是根据您的建议添加的代码。它仍然无法正常工作。当我单击图像时，没有任何反应。我尝试将 attr 用于“alt”标签并在其中给出图像名称。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

有几种方法可以做到这一点。一种是将您的图像包装在一个 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 回答