Javascript 显示/隐藏多个 DIV

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 而不是允许多项选择。