Question

我需要一些帮助。我有一个当前的脚本，可以根据下拉选择器在可见和隐藏之间切换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>

Answer 1

id必须是唯一的，这就是为什么只有第一个项目正在更新。您可以将这些值设置为class，以允许多次选择。

Answer 2

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

Answer 3

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

Answer 4

感谢大家的帮助，我已经修改了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;
}

Javascript显示/隐藏多个DIV

4 个答案: