Question

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

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

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

Answer 1

如果您要删除用于标识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

Answer 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>

单击收音机时显示/隐藏div

2 个答案: