Question

我是jquery的新手，也许这是一个愚蠢的问题但是我在没有找到答案的情况下搜索了几乎所有地方的答案。所以，我们走了：

我想根据我在下拉表单中选择的选项来显示不同的内容。正如我在StackOverflow上学到的那样，您可以使用更改功能来执行此操作：

示例：

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

如果有人能指出我正确的方向，我将非常感激。

保

Answer 1

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

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

Answer 2

$('.classname')

选择一个类，所以 -

$('.' + $(this).val()).show();

如果下拉列表中的值与类名相对应，则

将起作用。

Answer 3

阅读jQuery doc about selectors。 $("#someId")选择havig someId元素作为id。 $(".someClass")选择someClass作为类的元素。它使用CSS3表示法。这是jQuery的核心。

Answer 4

 $(document).ready(function () {

 $(".col-md-12").load(function () {
        $("module").removeClass("hidden");
    });

使用jquery显示/隐藏特定类的内容

4 个答案: