简体   繁体   中英

I am not getting the results as I want

I am trying to display the results according to the option select from the list but not getting the result.I want when I click on "option 1" then "answer 1" will appear and other answers will be hidden, and as I select "option 2" then "answer 2" shows and else all answers will be hidden and so on...

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;}

Edit div ids by adding number to them. also change the id of options to 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>

and edit your jquery to get class:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM