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

Question

I've seen similar questions like this before but their example is using IDs. What if I want to use classes only?

jsfiddle

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

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

Answer 1

If you wanted to remove the id attributes for identifying the div elements, you could use data() attributes instead. Try this:

<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

Since you have mentioned that you want to use only classes instead of IDs. You have to use unique class names for each HTML tag.

 $(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>