javascript - 关闭其他 div 并在 jquery 的下拉菜单中保持选定的一个处于打开状态

Question

我想隐藏所有 sibling

我有这样的布局

                <label class=""><b>Design Level</b>
                    <select class="static-website">
                            <option>--------Select--------</option>
                            <option value="basic-design">Basic Design</option>
                            <option value="business-design">Business Design</option>
                            <option value="creative-design">Creative Design</option>
                    </select>
                </label>
                 <br/>

            <div class="static-basic-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="5" />
                </label>

             </div><!-- End of Basic Static Box -->

             <div class="static-business-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="10" />
                </label>

             </div><!-- End of BUSINESS Static Box -->

             <div class="static-creative-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="5" />
                </label>

             </div><!-- End of Creative Static Box -->

我们的 jquery 是这样写的:

=

$(".static-website select").on('change',function(e){
    var selectedopt=$(this).val();
    $('.static-'+selectedopt).siblings().hide(); (this is not working)
    $('.static-'+selectedopt).show();

});

但看起来像 $('.static-'+selectedopt).siblings().hide();这是行不通的。

谢谢!

Answer 1

问题是您的更改选择器 $(".static-website select") 获取 .static-website 下的所有 select 标记>，但你想要的是 .static-website 本身。另外，您可能只想过滤 div 的 sibling 。

$(".static-website").on('change', function(e) {
  var selectedopt = $(this).val();
  $('.static-' + selectedopt).siblings("div").hide();
  $('.static-' + selectedopt).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class=""><b>Design Level</b>
  <select class="static-website">
    <option>--------Select--------</option>
    <option value="basic-design">Basic Design</option>
    <option value="business-design">Business Design</option>
    <option value="creative-design">Creative Design</option>
  </select>
</label>
<br/>

<div class="static-basic-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="5" />
  </label>

</div>
<!-- End of Basic Static Box -->

<div class="static-business-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="10" />
  </label>

</div>
<!-- End of BUSINESS Static Box -->

<div class="static-creative-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="5" />
  </label>

</div>
<!-- End of Creative Static Box -->