Question

我试图根据列表中的选项选项显示结果，但没有得到结果。我想点击＆＃34;选项1＆＃34;然后＆＃34;回答1＆＃34;将出现，其他答案将被隐藏，并在我选择＆＃34;选项2＆＃34;然后＆＃34;回答2＆＃34;显示，否则所有答案都将被隐藏等等......

HTML:

<div id="amenities" target="1">option 1</div>
<div id="amenities" target="2">option 2</div>
<div id="amenities" target="3">option 3</div>
<div id="amenities" target="4">option 4</div>
<div id="amenities" target="5">option 5</div>
<div id="amenities" target="5">option 5</div>

<div id="list" class="amenities-list">answer 1</div>
<div id="list" class="amenities-list">answer 2</div>
<div id="list" class="amenities-list">answer 3</div>
<div id="list" class="amenities-list">answer 4</div>
<div id="list" class="amenities-list">answer 5</div>
<div id="list" class="amenities-list">answer 6</div>

JQuery:

jQuery(function(){
    jQuery('#amenities').click(function(){
        jQuery('.amenities-list').hide();
        jQuery('#list'+$(this).attr('target')).show();
    });
});

CSS:

.amenities-list{display: none;}

Answer 1

通过为他们添加数字来编辑div ID。也将选项的ID更改为class。

<div class="amenities" target="1">option 1</div>
<div class="amenities" target="2">option 2</div>
<div class="amenities" target="3">option 3</div>
<div class="amenities" target="4">option 4</div>
<div class="amenities" target="5">option 5</div>
<div class="amenities" target="5">option 5</div>

<div id="list1" class="amenities-list">answer 1</div>
<div id="list2" class="amenities-list">answer 2</div>
<div id="list3" class="amenities-list">answer 3</div>
<div id="list4" class="amenities-list">answer 4</div>
<div id="list5" class="amenities-list">answer 5</div>
<div id="list6" class="amenities-list">answer 6</div>

并编辑你的jquery以获得课程：

jQuery(function(){
    jQuery('.amenities').click(function(){
        jQuery('.amenities-list').hide();
        jQuery('#list'+$(this).attr('target')).show();
    });
});

我没有得到我想要的结果

1 个答案: