1

我需要一点帮助。我有一个当前脚本，可以根据下拉选择器在可见和隐藏之间切换 div ，它的工作原理与最初的设计完全一样。

我遇到的问题是我需要修改它以更改页面上超过 1 个 div。目前我对 div 使用相同的 ID，但只有页面上的第一项被更新。阅读 JS 是有道理的，但我不知道如何修改它以获得所需的结果？

Javascript：

var lastDiv = "";
var lastProd = "";
function showDiv(divName, productID) {
    if (productID == lastProd) {
        $("#"+lastDiv).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
    } 
    else {
        $(".visible-div-"+productID).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
    }
    lastProd = productID;
    lastDiv = divName;
}

选择器：

<select onchange="showDiv('pxo_'+this.value,2);" name="pre_xo_id">
<option value="3">Blue - £120.00</option>
<option value="4">Red - £120.00</option>
<option value="5">Yellow - £120.00</option>

DIV的：

<div id="pxo_3" class="visible-div-2" style="display: none;">RED</div>
<div id="pxo_4" class="hidden-div visible-div-2" style="display: none;">BLUE</div>
<div id="pxo_5" class="hidden-div visible-div-2" style="display: block;">YELLOW</div>

<div id="pxo_3" class="visible-div-2" style="display: none;">1 In Stock</div>
<div id="pxo_4" class="hidden-div visible-div-2" style="display: none;">1 In Stock</div>
<div id="pxo_5" class="hidden-div visible-div-2" style="display: none;">0 In Stock</div>
4

4 回答 4

4

id's 必须是唯一的，这就是为什么只更新第一项。您可以将这些值class改为允许多项选择。

于 2013-05-09T07:25:45.193 回答
0

首先，您不能将一个 id 用于多个元素。它们必须是唯一的。将相同的 css 类应用于这些元素。我们可以使用相同的类来允许多选。

于 2013-05-09T07:25:37.923 回答
0

ID 应该仅用于页面上的单个元素。您想使用 css 选择器。

于 2013-05-09T07:26:22.473 回答
0

感谢大家的帮助，我已经修改了 JS 以查找 ID 和 Class，因为我无法更改部分代码，因为它受 ioncube 保护。

这似乎有预期的结果：

var lastDiv = "";
var lastProd = ""; 
function showDiv(divName, productID) {
    if (productID == lastProd) {
        $("#"+lastDiv).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
        $("."+lastDiv).hide();
        $("."+divName).fadeIn(".visible-div-"+productID);
    } else {
        $(".visible-div-"+productID).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
        $(".visible-div-"+productID).hide();
        $("."+divName).fadeIn(".visible-div-"+productID);
    }
    lastProd = productID;
    lastDiv = divName;
}
于 2013-05-09T07:44:12.760 回答