javascript - 单击收音机时显示隐藏div

javascript - 单击收音机时显示隐藏div,第1张

我之前见过类似的问题,但他们的例子是使用ID。如果我只想使用课程怎么办?

jsfiddle

$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();

        $(".desc").hide(200);
        $(".desc"   test).show(200);
    });
});

最佳答案:

2 个答案:

答案 0 :(得分:2)

如果您要删除用于标识id元素的div属性,则可以使用data()属性。试试这个:

<div class="desc" data-cars="2">2 Cars Selected</div>
<div class="desc" data-cars="3" style="display: none;">3 Cars</div>
$("div.desc").hide().filter(function() {
    return $(this).data('cars') == test;
}).show();

Example fiddle

答案 1 :(得分:2)

由于您提到过您只想使用类而不是ID。您必须为每个HTML标记使用唯一的类名。

$(document).ready(function() {
  $("input[name$='cars']").click(function() {
    var selectedClass = $(this).attr("class");
    //alert(".dec"   selectedClass);
    $("div.desc").hide();

    $(".desc."   selectedClass).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="myRadioGroup">

  2 Cars
  <input type="radio" name="cars" checked="checked" value="2" class="2cars" />3 Cars
  <input type="radio" name="cars" value="3" class="3cars" />

  <div class="desc 2cars">
    2 Cars Selected
  </div>
  <div class="desc 3cars" style="display: none;">
    3 Cars
  </div>
</div>

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复