Question

我有一个邮政编码条目输入框，当用户输入我希望显示特定DIV的邮政编码时。

除了输入框和go按钮之外，它始于所有隐藏的内容，然后用户输入邮政编码并显示匹配的DIV（DIV ID将是邮政编码）可能有数百个DIV和可能的输入。

这是我到目前为止所做的，请注意它开始显示所有内容（不是我想要的）但是它有点工作

$(document).ready(function(){
    $("#buttontest").click(function(){

        if ($('#full_day').val() == 60538) {   

            $("#60538").show("fast"); //Slide Down Effect
            $("#60504").hide("fast");
        }

         else {
            $("#60538").hide("fast");    //Slide Up Effect
            $("#60504").show("500");
        }

         });
    $("#full_day").change(function() {
        $("#60504").hide("500");
        $("#60538").show("500");
    });


});

链接到工作文件http://jsfiddle.net/3XGGn/137/

Answer 1

的 jsFiddle Demo 的

使用纯数字作为id是造成问题的原因。我建议你把它们改成

<div id="zip60538"> Welcome to Montgomery </div> <div id="zip60504"> <h1>Welcome to Aurora</h1> </div>

在html中（以及在链接小提琴中可以看到的css和js）

这将允许在DOM中正确引用它们

修改的

的 jsFiddle Demo 的

如果您有很多要处理的内容，我可能会将html区域包装在div中进行本地化，然后使用数组来存储接受的邮政编码，并在点击事件中使用这两种方法

$(document).ready(function(){ var zipCodes = [60538,60504]; $("#buttontest").click(function(){ var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val())); $("#zipMessage > div").hide("fast"); $("#zip"+zipCodes[zipIndex]).show("fast"); }); });

Answer 2

以display: none;的所有div风格开始。在您的按钮上单击只需检查存在具有该ID的div，如果存在，则隐藏所有其他（为此使用公共类）并显示正确的类：

$("#buttontest").click(function() {
    var zip = $("#full_day").val();

    if ( $("#" + zip).length ) {
        $(".commonClassDiv").hide();
        $("#" + zip).show();
    }
});

根据用户输入显示和隐藏DIV

2 个答案: