Question

我有以下jQuery：

<script>
    $(document).ready(function () {
        $(".search_type").hide();
        $("#select_search").change(function () {
            $('#' + $(this).val()).toggle();
        });
    });
</script>
<select id="select_search">
      <option value="1">
      <option value="2">
      <option value="3">
 </select>
 <div id="1" class="search_type">Some Text</div>
 <div id="2" class="search_type">Some Text</div>
 <div id="3"class="search_type">Some Text</div>
enter code here

目前我根据选择框更改显示相应的div，但是，如果再次更改选择框，则不会将其删除。

是否有if（（$ this）：not.val（））.....有什么隐藏的东西吗？对不起，我是JS / jQuery的新手，我真的在这里苦苦挣扎。

Answer 1

你需要隐藏先前显示的元素，一个简单的方法来再次隐藏所有search_type元素，然后更改处理程序然后显示当前元素

jQuery(function ($) {
    var $stypes = $(".search_type").hide();
    $("#select_search").change(function () {
        $stypes.hide();
        $('#' + $(this).val()).show();
    }).change();
});

演示：Fiddle

Answer 2

不，但你可以这样做：

$(document).ready(function () {
    $(".search_type").hide();
    $("#select_search").change(function() {
        $(".search_type").hide();
        $("#" + $(this).val()).show();
    });
});

这将隐藏类search_type的所有元素，然后显示选择。

你也可以制作一个占位符变量，如下所示：

var showing;

$(document).ready(function () {
    $(".search_type").hide();
    $("#select_search").change(function() {
        if (showing) {showing.hide();}
        showing = $("#" + $(this).val());
        showing.show();
    });
});

Answer 3

我对你的问题有点不清楚，但我最好告诉你想要从选择框中显示一个与用户选择对应的DIV。如果用户选择了不同的选项，您想隐藏之前的显示框，是否正确？

我认为此示例可以帮助您：http://jsfiddle.net/HaMQr/

有一个$.not( object )方法会对任何匹配的对象采取操作，而该对象不是您提供的对象。请参阅以下代码：

$("#select_search").change(function () {
    var activeBox = $('#' + $(this).val());
    activeBox.show();

    $('div').not(activeBox).hide();                
 });

Jquery隐藏/显示div从选择框不起作用，我无法弄清楚为什么？

3 个答案: