Javascript顯示/隱藏多個DIV的

我需要一點幫助。我有一個當前的腳本，切換div之間的可見和隱藏取決於下拉選擇器，它工作原來設計的絕對好。Javascript顯示/隱藏多個DIV的

我遇到的問題是我需要修改它以在頁面上更改多個1格。目前，我爲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>

來源

2013-05-09 bulldog5046

使用相同'class'屬性，而不是'id'，這將選擇所有以不同於'id'屬性相同的'class'屬性值的元素.. – 2013-05-09 07:27:39

id必須是唯一的，這就是爲什麼只有第一個項目正在更新。您可以將這些值改爲class，以允許進行多項選擇。

來源

2013-05-09 07:25:45

或可能會把每個獨特的ID .. – Olrac 2013-05-09 07:35:29

這是有道理的，我可能應該看到它自己。但它確實給了我另一個問題。部分腳本（店面）已編碼，因此我無法更改它。這意味着DIV顯示庫存水平，我不能將該屬性更改爲類中的屬性。我可以修改javascript來做ID和Class嗎？ – bulldog5046 2013-05-09 07:37:58

你是如何將這些值分配給id的？ – 2013-05-09 07:43:51

首先，你不能使用人數超過一個element.They一個ID必須是唯一的。對這些元素應用相同的CSS類。我們可以使用相同的類來允許多個選擇。

來源

2013-05-09 07:25:37 PSR

ID應該只用於頁面上的單個元素。你想使用CSS選擇器。

來源

2013-05-09 07:26:22

對不起，我更新了你的答案 – PSR 2013-05-09 07:29:23

請恢復我的更改 – PSR 2013-05-09 07:30:21

哈哈，好吧.. – 2013-05-09 07:31:06

謝謝大家的幫助，我修改了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-09 07:44:12 bulldog5046

Javascript顯示/隱藏多個DIV的

回答

相關問題