Question

我有一个包含5个值的选定框。我正试图淡化框中所选内容的输入。例如：如果选择了input1，则在单击时淡入input1。

这是我正在尝试做的事情：

$(document).ready(function(){
    $('.btn').click(function() {
               if($("#selectbox").value == 'Input1') {
            $(".input1").show();
        } else if($("#selectbox").value == 'Input2') {
            $(".input2").show();
        } else if($("#selectbox").value == 'Input3') {
            $(".input3").show();
        } else if($("#selectbox").value == 'Input4') {
            $(".input4").show();
        } else if($("#selectbox").value == 'Input5') {
            $(".input5").show();
        }
    }
});

这是一个不工作的小提琴：

http://jsfiddle.net/rzMHJ/

Answer 1

您的代码有两个错误，这就是它无法正常工作的原因。

~~$("#selectbox").value~~ 应为$("#selectbox").val()
您尚未使用);

在这个例子中使用switch case也好得多。

工作演示：http://jsfiddle.net/naveen/Zn2yy/

更新（基于Nick Cravers评论）

对于这种特殊情况，您可以像这样简化代码。
演示：http://jsfiddle.net/nick_craver/BWacA/

Answer 2

您的代码存在两个导致其失败的问题。

首先，使用jQuery函数.value替换val()。

其次，在结尾处将);添加到倒数第二个}。

以下是重构的代码：

$(document).ready(function() {
    $('.btn').click(function() {
        var show = "." + $("#selectbox").val().toLowerCase();
        $(show).fadeIn();
    });
});

jQuery：点击时淡化选定的值

2 个答案: