Jquery - 开关 &&不工作？

Question

我试图根据前面 2 个字段的值来控制隐藏的输入值。我在 switch 语句方面取得了一些成功，但我似乎无法让它准确地工作。我想要发生的是测试用户是否在 #state 字段中输入了 CA 或 NV，如果他们输入了，并且他们选择了选项值 auto，则 #ins_link 值将更改为 CA 或 NV（分别）。我在这里做错了什么？这是我正在处理的内容：

<input class="statefield isstate" name="state" id="state" maxlength="2" onkeyup="this.value=this.value.toUpperCase();">

<select class="input_field_12em required" name="ins_type" id="ins_type">
                                            <option value="" selected="selected" >---Select Insurance Type---</option>

                    <option value="home">Home</option>
                    <option value="auto">Auto</option>
                    <option value="homeauto">Home + Auto</option>
                    <option value="renter">Renter</option>
                    <option value="buildingowner">Building Owner</option>
                    <option value="dwellingfire">Dwelling Fire</option>
                    <option value="commercial">Commercial</option>
                    <option value="agricultural">Agricultural</option>
                </select>       


$(function() {
    $('#ins_type').change(function() {
        switch (this.value) {
           case 'auto':
           if ($("#state[CA]" && "#ins_type[auto]"))
              $(".ins_link").val("CA"); 
              break;
            case 'auto':
           if ($("#state[NV]" && "#ins_type[auto]"))
              $(".ins_link").val("NV"); 
           default :
              $(".ins_link").val("summary");
           break; 
        }
    });
});

<input type="hidden" class="link ins_link" value="summary">

Answer 1

解决您的问题的实际方法是

$(function () {
    $('#ins_type').change(function() {
        if (this.value === "auto") {
            var state = $("#state").val();

            if (state === "CA" || state === "NV") {
                $(".ins_link").val(state);
            } else {
                $(".ins_link").val("summary");
            }
        }
    });
});

您看到这段代码实际上如何反映您的需求了吗？

• 如果#ins_type的值为“auto”：
  • 如果#state的值为“CA”或“NV”，请将.ins_link的值设置为所选的州。
  • 否则，请将 .ins_link 的值设置为“summary”。

你的代码结构应该反映你的思维结构。

Answer 2

       if ($("#state[CA]" && "#ins_type[auto]"))

这是对两个字符串进行逻辑与，然后将其结果用作页面中元素的选择器。这是行不通的。

您的示例代码没有显示您存储状态信息的位置/方式，但您想要更多类似这样的内容：

case 'auto':
    if ($('#state').val() == 'CA') {
        ... do california stuff ...
    }
    if ($('#state').val() == 'NV') {
        ... do nevada stuff ...
    }
    break;

在内部 if() 中再次检查“自动”选择是多余的，因为您已经强制执行它使用 switch() 设为“自动”。

Answer 3

您对 JavaScript 和 jQuery 的工作方式存在一些误解。

"#state[CA]" 只是一个字符串，"#ins_type[auto]"

"#state[CA]" && "#ins_type[auto]" 将这些字符串转换为布尔值，然后询问它们是否均为 true。只有空字符串才会转换为 false，因此逻辑是：

"#state[CA]" && "#ins_type[auto]" === true && true === true

然后用 $ 函数调用包装它，该函数调用只是将其参数转换为 jQuery 对象。也就是说

$("#state[CA]" && "#ins_type[auto]") === $(true) = $()

，您只得到了空的 jQuery 对象，因为您没有传递选择器或 DOM 元素。

如果您使用 if 测试任何非 null、非undefined 对象，它会将其转换为 bool，因此您会得到 if( true)：

    if ($("#state[CA]" && "#ins_type[auto]"))
<=> if ($())
<=> if (true)

相同的逻辑适用于第二个 if 语句，因此两个 if 语句不执行任何操作。