2

我有以下 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 的新手，在这里我真的很挣扎。

4

3 回答 3

2

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

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

演示：小提琴

于 2013-09-24T03:37:48.250 回答
0

不，但你可以这样做：

$(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();
    });
});
于 2013-09-24T03:37:42.267 回答
0

我对你的问题有点不清楚，但尽我所能告诉你想显示一个与用户从选择框中的选择相对应的 DIV。如果用户选择了不同的选项，你想隐藏以前的显示框，对吗？

我认为这个示例会对您有所帮助：http: //jsfiddle.net/HaMQr/

有一种$.not( object )方法可以对任何不是您提供的匹配对象执行操作。请看下面的代码：

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

    $('div').not(activeBox).hide();                
 });
于 2013-09-24T03:50:50.897 回答