javascript - 如何将这个单一案例(显示基于下拉列表选择的文本字段)抽象为 jQuery 中的通用函数？

Question

这是我关于 SO 的第一个详细问题。

你好，我有一个表单，在很多情况下，当用户在下拉列表中选择“其他”选项时，我想在下拉列表后显示一个文本字段。

我正在使用标准命名约定，我想知道，我是否必须在文档中拥有与 DDL/文本字段对一样多的函数，或者我是否可以拥有一个可以调用 DDL 类的函数？这是 HTML:

<label for="spotter">Spotter:</label>
<select id="spotter" required>
    <option value="Snoop Dogg">Snoop Dogg</option>
    <option value="MC Escher">MC Escher</option>
    <option value="Linus Thorvalds">Linus Thorvalds</option>
    <option value="Other">Other</option>
</select>
<br/>

<div id="spotter_other_div"><label for="spotter_other">Other Spotter:</label><br><input type="text" name="spotter_other" id="spotter_other" size="50" required/></div>

这是 jQuery/javascript:

$(document).ready(function(){   
    $("#spotter").change(function () {
        //alert("You just changed the value of the #spotter drop down menu.");
        if ($(this).val() == "Other" )
            //alert("You just changed the value of the #spotter drop down menu to 'Other.'");
            $("#spotter_other_div").css("visibility", "visible");
        else
            $("#spotter_other_div").css("visibility", "collapse");
    });     
});

包含文本字段的 div 的初始状态在 css 中是“折叠”。

我正在学习 jQuery，现在我知道如何为一般情况做某事，我想看看我是否可以编写这个函数，或者我是否必须明确地执行它.

请注意，该页面仍在开发中，因此欢迎提出任何建议(例如，使用 span 而不是 div 来包含文本字段等。

谢谢!

Answer 1

我在这里看到两个选项。

1. 创建一个函数并将其参数化。这就是 Sethen Maleno 的回答所显示的。
2. 使您的函数更通用。

例如:

$(document).ready(function(){   
    // Apply this to every select element
    $("select").change(function () {
        // Dynamically build up the selector to show/hide
        var secondMenuId = '#' + $(this).attr(id) + '_other_div'
        if ($(this).val() == "Other" )
            $(secondMenuId).css("visibility", "visible");
        else
            $(secondMenuId).css("visibility", "collapse");
    });     
});

请注意，此方法在您生成 HTML 时需要遵守纪律，并且已正确分配 ID(自从您提到使用标准命名约定以来，您似乎正在这样做)。

这种方法的优点是，这是您唯一拥有的代码，您不需要编写大量处理程序。

Sethen's 给了你更多的灵 active ，因为你的 id 不需要遵循严格的约定(你可以传递任何你想要的作为参数)，但确实需要你编写一个函数调用来将它附加到你想要的每个元素.

这两种技术都是有效的并且有它们的时间和地点。