jQuery show hide div基于文本框值(克隆行)

时间:2014-04-03 20:53:24

标签: javascript jquery

我正在尝试使用文本框值显示和隐藏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 div“image1”,如果SelName值为Value02 div“image2”显示...

但是如果第一行SelNmame具有值Value01并且第二行克隆行SelName具有值Value02,则“image1”div保持隐藏并且仅显示div“image02”。这是一个问题。

我想要显示两个div“image1”和“image2”。

如果第一行SelNmame的值为Value02且第二行的SelNmame值为Value02,则只显示div“image2”。

我必须使用最近的('tr')和find(“[id ^ ='']”)。val()而不是???

工作jsfiddle

1 个答案:

答案 0 :(得分:0)

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(); }
});