jQuery顯示基於文本框值的隱藏div（克隆行）

Question

我試圖使用文本框的值顯示和隱藏DIV。

$('input[name=SelName]').each(function() { 
var ClassVal = $(this).val(); 

if(ClassVal == "Value01") { $('#image1').show(); } 
else { $('#image1').hide(); } 

if(ClassVal == "Value02") { $('#image2').show(); } 
else { $('#image2').hide(); } 

if(ClassVal == "Value03") { $('#image3').show(); } 
else { $('#image3').hide(); } 

}); 

第一行：如果SelName值Value01格「圖像1」所示，如果SelName值Value02格「圖像2」所示...

但是，如果第一行SelNmame具有價值Value01和第二克隆行SelName的值爲Value02，「image1」div保持隱藏狀態，僅顯示div「image02」。這是一個問題。

我希望顯示div和「image1」和「image2」。

如果第一行的SelNmame的值爲Value02，第二行的SelNmame的值爲Value02，則只顯示div「image2」。我必須使用最接近的（'tr'）和find（「[id^='']」）。val（）來代替嗎？

工作jsfiddle

Answer 1

Your updated FIDDLE

只是隱藏所有div，然後再顯示所有你想後：

$('#image1').hide(); // add this 
$('#image2').hide(); // add this 
$('#image3').hide(); // add this 

$('input[name=SelName]').each(function() { 
    var ClassVal = $(this).val(); 

    if(ClassVal == "Value01") { $('#image1').show(); } 
    // remove this: else { $('#image1').hide(); } 

    if(ClassVal == "Value02") { $('#image2').show(); } 
    // remove this: else { $('#image2').hide(); } 

    if(ClassVal == "Value03") { $('#image3').show(); } 
    // remove this: else { $('#image3').hide(); } 
});