2

这是我关于 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 来包含文本字段等。

谢谢！

4

2 回答 2

2

您可以只使用带有一些代码的单个函数并多次调用它（或者如果您使用相同的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 
});
于 2013-08-09T19:25:55.787 回答
2

我在这里看到两个选项。

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

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

于 2013-08-09T19:35:56.760 回答