Javascript показать/скрыть несколько DIV's

Question

Мне нужна небольшая помощь. У меня есть текущий скрипт, который переключает div между и и скрытым в зависимости от селектора выпадающего списка, он работает так, как он был изначально разработан абсолютно точно.

Проблема в том, что мне нужно изменить ее, чтобы изменить более 1 div на странице. В настоящее время я использую тот же ID для div, но обновляется только первый элемент на странице. Чтение 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

Во-первых, вы не можете использовать один идентификатор для Morethan одного element.They должно быть уникальным. Примените тот же класс css к этим элементам. Вместо этого мы можем использовать тот же класс, чтобы разрешить множественный выбор.

Answer 3

Идентификаторы должны использоваться только для одного элемента на странице. Вы хотите использовать селектора css.

Answer 4

Благодарим вас за помощь, я изменил JS, чтобы посмотреть как ID, так и класс, так как я не могу изменить часть кода из-за того, что он защищен 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; 
}