Javascript 如何在jQuery中将这个单独的案例（根据下拉列表的选择显示文本字段）抽象为一个通用函数？

这是我第一个详细的问题

您好，我有一个表单，有许多实例，当用户在下拉列表中选择“其他”选项时，我希望在下拉列表后显示一个文本字段

我正在使用一个标准的命名约定，我想知道，我是否必须在文档中拥有与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>

在css中，包含文本字段的div的初始状态是“collapse”

我正在学习jQuery，我知道如何为一般情况做一些事情，我想看看这是一个我可以编写的函数，还是必须显式地编写

请注意，该页面是一个正在进行的工作，因此欢迎提出任何建议（例如，使用span而不是div来包含文本字段等）

---

谢谢！

您可以将一个函数与一些代码一起使用，并多次调用它（如果您使用相同的

id

或

类，则调用一次）……因此函数的用途是：可重用的代码位。下面是它的外观

$(function () { //shorthand for ready in jQuery
    //set up your function
    function dropDownOther(spotter, spotterDiv) { //function takes two args
        $(spotter).change(function () {
            if ($(this).val() == "Other") {
                $(spotterDiv).css("visibility", "visible");
            } else {
                $(spotterDiv).css("visibility", "collapse");
            }
        });
    }
    dropDownOther("#spotter", "#spotter_other_div"); //call your function
    dropDownOther("#otherSelector", "#otherSelectorTwo"); //call it again if necessary 
});

您可以将一个函数与一些代码一起使用，并多次调用它（如果使用相同的
id
或
class
），因此函数的用途是：可重用的代码位。下面是它的外观

$(function () { //shorthand for ready in jQuery
    //set up your function
    function dropDownOther(spotter, spotterDiv) { //function takes two args
        $(spotter).change(function () {
            if ($(this).val() == "Other") {
                $(spotterDiv).css("visibility", "visible");
            } else {
                $(spotterDiv).css("visibility", "collapse");
            }
        });
    }
    dropDownOther("#spotter", "#spotter_other_div"); //call your function
    dropDownOther("#otherSelector", "#otherSelectorTwo"); //call it again if necessary 
});

我在这里看到两种选择

创建一个函数并将其参数化。这是Sethen Maleno的答案所显示的
使您的函数更通用
例如：

$(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为您提供了更多的灵活性，因为您的ID不需要遵循严格的约定（您可以将任何需要的内容作为参数传递），但确实需要您编写一个函数调用以将其附加到所需的每个项

这两种技术都是有效的，都有其时间和地点。
我在这里看到两种选择

创建一个函数并将其参数化。这是Sethen Maleno的答案所显示的
使您的函数更通用
例如：

$(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为您提供了更多的灵活性，因为您的ID不需要遵循严格的约定（您可以将任何需要的内容作为参数传递），但确实需要您编写一个函数调用以将其附加到所需的每个项

这两种技术都是有效的，都有其时间和地点。
你可以将一个函数与一些代码一起使用，并多次调用它……因此函数的目的是：可重用的代码位。如果我给你的答案是你要找的答案，一定要将它标记为正确的答案。；）它们都是正确的，但我更喜欢另一个。谢谢你的提醒，我做了标记。太好了！很高兴我们能提供帮助。您只需使用一个函数和一些代码，并多次调用它。。。因此函数的用途是：可重用的代码位。如果我给你的答案就是你要找的答案，一定要把它标记为正确的答案。；）他们两个都对，但我更喜欢另一个。谢谢你的提醒，我做了标记。太好了！很高兴我们能提供帮助。我喜欢这个选项，因为你是对的，我确实遵守了严格的命名约定，而且它也解释了没有“其他”选项的DDL，在这种情况下不会发生任何事情。我只是检查了一下，我没有这样的DDL，但如果我有，我就不用担心了。我喜欢这个选项，因为你是对的，我确实遵守了严格的命名约定，而且它也解释了没有“其他”选项的DDL，在这种情况下不会发生任何事情。我只是检查了一下，我没有这样的DDL，但如果我有，我就不用担心了。