Question

我们的网站具有响应性，因此平板电脑和桌面视图是同一页面，但由于显示/隐藏div元素而只是一个不同的布局。

很难解释所以我把代码复制到了jsfiddle。 https://jsfiddle.net/4wsqpjrn/

我试图让两个下拉框更新div，我错过了什么？

我复制了这些字段，以便它在页面中呈现的方式，从平板电脑查看时，隐藏了2个桌面div，从桌面隐藏了2个平板电脑div。

平板电脑div在桌面后面的页面中首先呈现。

jquery位于页面底部

jQuery('#product-options').change(function (event) {
jQuery('.product-price').html(jQuery('#product-options option:selected').attr('data-price'));
jQuery('.aep').html(jQuery('#product-options option:selected').attr('data-aep'));
}).change(); //to iniitize the value on load

平板电脑方面工作正常，它会改变平板电脑和桌面电脑的价值，但桌面下拉框根本不起作用？

html代码从包含文件中提取两次，一次用于平板电脑，一次用于桌面。

<div style="padding-bottom:3px">
<div class="inline"><font class="was_style">
<b>Was &pound;</b></font></div><div class="inline"><div class="aep aep_style">479</div></div>


<div style="padding-bottom:5px">
<div class="inline"><font class="product_price now_style">&pound;</font>    
</div><font class="product_price now_style"><div class="product-price inline" itemprop="price">349</div></font></div>
<div></div>
</div>

Answer 1

您的两个选择都共享相同的ID。将它们重命名为：product-options-desktop-product-options-tablet-tablet并使用下面的代码。

jQuery('#product-options-desktop').change(function (event) {
jQuery('.product-price').html(jQuery('#product-options-desktop option:selected').attr('data-price'));
jQuery('.aep').html(jQuery('#product-options-desktop option:selected').attr('data-aep'));
    }).change(); //to iniitize the value on load

jQuery('#product-options-tablet').change(function (event) {
jQuery('.product-price').html(jQuery('#product-options-tablet option:selected').attr('data-price'));
jQuery('.aep').html(jQuery('#product-options-tablet option:selected').attr('data-aep'));
    }).change();

现在应该解决这个问题。

使用保管箱值更新多个div，1个保管箱正常，1不是

1 个答案: