Javascript 缩短或简化jQuery逻辑

是否有任何可能的方法来缩短下面的jQuery代码部分

我可能需要对其他8个选择框重复使用相同的逻辑。非常感谢

代码

$（'select#u client'）。在（'change'，function（）上{
var val=该值；
/*可以缩短这一部分吗？我有更多这样的案例*/
如果（val==‘其他’）{
$（'input_client'）.addClass（'show'）；
$（'#input_client'）。removeClass（'hide'）；
$（'input_client'）.val（''）；
$（“#输入_客户端”）.focus（）；
}否则{
$（'#input_client'）.addClass（'hide'）；
$（'input_client'）。removeClass（'show'）；
}
})

A公司
A公司
A公司
A公司
其他

请试试这个

$('#select_client').on('change', function() {
        var val = this.value;

        /* Possible to shorten this section? I have more cases like this */
        if(val=='OTHER'){
            $('#input_client').addClass('show').removeClass('hide').val('').focus();

        } else {
            $('#input_client').addClass('hide').removeClass('show');

        }
    })

---

这个比较短。。。您可以添加一些条件，使其与多个选择输入对工作在同一个功能中；）

因为您使用的是jQuery，所以可以链接函数以减少输入选择器的冗余

如果希望根据条件添加/删除类，还可以查看

.toggleClass

此外，您可以将元素保存在变量中并在任何地方使用该变量，而不是一次又一次地获取元素

$（'select#u client'）。在（'change'，function（）上{
var valid=this.value==‘其他’；
var$input=$（“#input_client”）；
$input
.toggleClass（'show'，有效）
.toggleClass（'hide'，！valid）；
如果（有效）{
$input
.val（“”）
.focus（）；
}
})

A公司
A公司
A公司
A公司
其他

您可以使用根据条件切换输入的显示

此外，如果您计划使用多个选择和输入框，则应使用类，而不是id

如果您的网页中有相同的多个元素，那么在这里定位id不是一个好主意

在下面的示例中，我使用了

.input\u client

类作为选择器

$（'select#u client'）。在（'change'，function（）上{
var val=该值；
/*可以缩短这一部分吗？我有更多这样的案例*/
如果（val==‘其他’）{
$（this）.next（.input_client”）.toggle（“display”）；
$（this.next（“.input_client”）.val（“”）；
$（this）.next（“.input_client”）.focus（）；
}
})

.hide{
显示：无；
}

A公司
A公司
A公司
A公司
其他

您可以通过将CSS定义为“显示”（或“隐藏”）为默认状态来进一步简化，然后您只需要使用

show

或

hide

，而不是两者都使用。当你有这样的“布尔”状态（即两个选项，相互排斥）时，你通常应该让它以这种方式工作。创建一个函数并将

val

变量传递给它，这样你就可以在一行中任意调用它；）

$('#select_client').on('change', function() {
    $input = $('#input_client')
      .toggleClass('show',$(this).val() ==='OTHER')
      .removeClass('hide',$(this).val() !=='OTHER');

    if($(this).val()==='OTHER'){
        $input.val('').focus();
    }
});