Question

在我的网上商店，我有多个选项，每个选项都会改变图像。顾客可以看到它会是什么样子。

示例：

<label>color group 1</label>
<select>
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
</select>

<label>color group 2</label>
<select>
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
</select>

选择这些选项时，图像颜色会发生变化。我使用以下javascript来自动添加＆＃34; color1 = red＆amp;＆＃34;和＆＃34; color2 = red＆amp;＆＃34;等等。

<script>
    $( "select" )
        .change(function () {
            var str = "http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=<?php echo $product_id; ?>&",
            i = 0;
            $( "select option:selected" ).each(function() {
                i++;
                str += 'color' + i + '=' + $( this ).text() + '&';
            });
            str = str.replace(/&$/, '');
            $('#thumbnail').attr('src', str);
        })
    .change();
</script>

图像的工作原理如下：

    <img id="thumbnail" src="image/catalog/designer/image.php?product_id=50&color1=red&color2=yellow&color3=blue&" title="image" alt="image" />

我的问题：

我想制作另一个下拉列表（更友好，因为我可以使用＆lt; ul＆gt;＆lt; li＆gt;列表显示颜色，但是javascript不再有效。< / p>

是否有可能更改使用此方法的javascript？

我把它放在JSFiddle中： http://jsfiddle.net/j0dv6ywe/

我希望有人能给我答案!!

Answer 1

假设您的列表看起来像这样......

<ul>
  <li class="red">Red</li>
  <li class="yellow">Yellow</li>
  <li class="blue">Blue</li>
</ul>

你已经按照你的建议应用了样式来显示颜色。

然后你的jQuery处理程序看起来像这样......

$('ul li').click(function() {

 $(this).parent().find('.selected').removeClass('selected');
 $(this).addClass('selected');

 var str =  "http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=<?php echo $product_id; ?>&",
        i = 0;
        $( "ul li.selected" ).each(function() {
            i++;
            str += 'color' + i + '=' + $( this ).text() + '&';
        });
        str = str.replace(/&$/, '');
        $('#thumbnail').attr('src', str);

});

试一试，你能看出我是如何根据你的情况调整它的吗？如果这有帮助，或者我可以进一步提供帮助，请告诉我？

使用ul li更改多个选项

1 个答案: