使用 jquery 显示/隐藏具有特定类的内容 [英] Show/hide content with specific class using jquery

问题描述

我是 jquery 的新手，也许这是一个愚蠢的问题，但我几乎到处都在寻找答案，却没有找到.所以，我们开始:

I'am new to jquery and maybe this is a stupid question but I have searched for an answer just about everywhere without finding one. So, here we go:

我想根据我在下拉表单中选择的选项显示不同的内容.正如我在 StackOverflow 上学到的，你可以使用 change 函数来做到这一点:

I want to show different content depending on what option I select in a drop down form. As I have learnt here on StackOverflow, you ca use the change function to do this:

示例:

<script type="text/javascript">

$(document).ready(function() {
$('#myselector').change(function(){
  $('.statecontent').hide();
  $('#' + $(this).val()).show();    
});
});

</script>

 <select id="myselector">
 <option value="state1"></option><br />
 <option value="state2"></option><br />
 <option value="state3"></option><br />
 </select>

<div id="state1" class="statecontent">State1 Specific Page Content Goes here</div><br     />
<div id="state2" class="statecontent">State2 Specific Page Content Goes here</div><br />
<div id="state3" class="statecontent">State3 Specific Page Content Goes here</div><br />

这段代码会根据我在下拉菜单中选择的状态"来显示不同 div 中的内容.但是如何将下拉列表的值连接到特定的类而不是 id.问题当然是当我在下拉列表中选择一个状态时，我想显示几个共享一个公共类的 div.

This code will alove me to show content thats inside the different divs depending on what 'state' I choose in the drop down. But how do I connect the values of the drop down to a specific class instead of an id. The problem is of course that I want to show several divs that share a common class when i select a state in the drop down.

如果有人能指出我正确的方向，我将不胜感激.

I would very much appreciate if anyone could point me in the right direction.

保罗

推荐答案

你可以像这样使用 class 而不是 Id

you can use class instead of Id like this

<div class="statecontent state1">State1 Specific Page Content Goes here</div><br />
<div class="statecontent state1">State1 Specific Page2 Content Goes here</div><br />
<div class="statecontent state2">State2 Specific Page Content Goes here</div><br />
<div class="statecontent state3">State3 Specific Page Content Goes here</div><br />

和你的 JQuery

$(document).ready(function() {
    $('#myselector').change(function() {
        $('.statecontent').hide();
        $('.' + $(this).val()).show();    
    });
});

这篇关于使用 jquery 显示/隐藏具有特定类的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！