Question

我的html和jquery代码在这里。如果以123结尾的值指定div将显示，则jquery代码执行。但我在这里遇到了问题。点击值c123和d123后，切换回a和b单选按钮。显示的div不会消失。如何解决这个问题？

<input type="radio" value="a" />
<input type="radio" value="b" />
<input type="radio" value="c123" />
<input type="radio" value="d123" />



<ul id="localBankc123" class="localBank">
  <li>Maybank</li>
</ul>
<ul id="localBankd123" class="localBank">
<li>CIMB Bank</li>
</ul>

$(".localBank").hide();
$("input[value$='123']").click(function() {
 var bank = $(this).val();
        $(".localBank").hide();
        $("#localBank"+bank).show();
    });

Answer 1

如果您使用.localBank内容发布HTML部分会更好。

但是，如果我已正确理解您的问题，它将不会隐藏您的div，因为处理程序未被调用（input没有以123结尾的值确实）

您可以将处理程序附加到所有input，然后在处理程序内，仅当点击的input的值以123结尾时才显示div。

这样的事情：

$(".localBank").hide();
$("input").click(function() {
  var bank = $(this).val();
  $(".localBank").hide();
  if (bank.indexOf(/123$/) {
    $("#localBank"+bank).show();
  }
});

Answer 2

$(".localBank").hide();
$("input").click(function() {
  var bank = $(this).val();
  if (bank.indexOf("123") > -1){
    $("#localBank"+bank).show();
  }else{
     $(".localBank").hide();
   }
});

Answer 3

请尝试此代码..

＆＃13;

$(".localBank").hide();
$("input").click(function() {
    var bank = $(this).val();
    $(".localBank").hide();
    $("#localBank"+bank).show();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="bank" value="a" />
<input type="radio" name="bank" value="b" />
<input type="radio" name="bank" value="c123" />
<input type="radio" name="bank" value="d123" />
   

<ul id="localBankc123" class="localBank">
  <li>Maybank</li>
</ul>
<ul id="localBankd123" class="localBank">
<li>CIMB Bank</li>
</ul>

＆＃13;

Jquery单选按钮显示和隐藏div

3 个答案: