当我的页面上有许多表单时，给定表单上的 Jquery 函数答案

【问题标题】：Jquery function on a given form, when many forms on my page当我的页面上有许多表单时，给定表单上的 Jquery 函数
【发布时间】：2011-06-27 16:49:34
【问题描述】：

我有一个在我的页面上重复多次的表单（它在论坛上）。我已经构建了某种 jquery 函数，它基本上执行以下操作：

选择带有值“自定义”的选择选项时，

隐藏选择
显示一个带有 textarea 的 div 并聚焦它

当输入模糊不清时

隐藏输入
通过显示“重置”选择并选择它的默认（空值）选项

问题是，我在我的页面上制作了一个表格。它有效。但是当我在多表单测试页面上尝试时，我的功能 - 隐藏每个表单的选择 - 显示一个内部带有 textarea 的 div，并为每个表单聚焦它。

这当然不是我想做的。

问题：如何使这些功能特定于形式？

下面是我的代码。

JQUERY

$("div[name=customInput]").hide();
$("select[name=motifs]").show();

$("select[name=motifs]").change(function () 
{
    if( $("select[name=motifs]").val() == "custom" )
    {   
        $("select[name=motifs]").hide();
        $("div[name=customInput]").show();
        $("textarea[name=customMotif]").focus();
    }
});
$("textarea[name=customInput]").blur ( function () 
{
    if( !$(this).val() ) 
    {
        $("div[name=customMotif]").hide();
        $("select[name=motifs]").show();
        $("select[name=motifs] option[name=motif]").attr("selected", "selected");
    }
});

$('textarea[name=customMotif]').keyup(function() {
            var len = this.value.length;
            if (len >= 150) {
                this.value = this.value.substring(0, 150);
            }
            $('span[name=charLeft]').text(150 - len);
});

HTML

<form action="note.php" method="post" name="notation" id="notation">
<select name="motifs">
        <option value="" name="void">Motif</option>
        <option value="custom" name="custom">Custom</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <div name="customInput">
        <textarea cols="30" name="customMotif"/>
        </textarea>
        <span name="charLeft">150</span> Characters left </div>
</form>

感谢您的帮助；我是一个初学者，还在学习如何把事情做好。任何帮助表示赞赏。

【问题讨论】：

您需要为每个表单设置单独的 id 或名称（例如，如果这是一个带有帖子的表单，您可以将帖子 id 附加到表单的 id）。然后在你的 JS 中你可以将你的逻辑应用到 $(#requirediv)
谢谢；以及如何将我的逻辑动态应用于正确的 ID？是不是有这个。语法或我不知道的东西可以做到吗？

标签： jquery select input

【解决方案1】：

这样的事情应该可以工作：

$("select[name=motifs]").change(function () 
{
    if( $(this).val() == "custom" )
    {   
        var $parentForm=$(this).closest("form");

        $parentForm.find("select[name=motifs]").hide();
        $parentForm.find("div[name=customInput]").show();
        $parentForm.find("textarea[name=customMotif]").focus();
    }
});

closest 将获得与选择器最接近的祖先。在这种情况下，选择包含在其中的表单。然后使用find 将仅在父表单中找到选择器。

附带说明，ID 应该始终是唯一的。

【讨论】：