绑定/单击上的JQuery参数注入与带参数的嵌入式点击处理程序

Question

所以旧的JavaScript爱好者和年轻的jQuery向导在我身上有一些分歧。 很抱歉您需要很长时间的设置，但问题的核心是，是将onClick代码直接嵌入到我的HTML中，还是采用jQuery风格，并使用bind()或click()。 我发现自己＆amp;我经常不同意这个话题，所以我想我会尝试就这个问题进行一些讨论。为了解释这个问题，下面的模式似乎最常见到这一点。

典型示例

---

我正在搜索成员目录。在我的界面上，我有各种过滤条件，如“性别”，“成员自”和“有个人资料照片”。标准看起来像这样......

• 用户可以通过单击文本（例如“女性”）或选择单选按钮来选择选项。
• 选择后，选择相应的单选按钮，文字加粗

我的html最终看起来像......

    <div id="FilterContainer_GenderDIV">
        <span id="FilterLabel_Gender">Gender:</span>
        <span id="FilterSelection_Gender">Any</span>
        <span id="FilterChicklet_Gender" class="sprite_MediumArrowDown inline" ></span>
    <div id="FilterOptions_GenderDIV">
        <input type="radio" id="GenderID" name="GenderID" value="1"/> <a href="" id="FilterOptionLink_CoupleGender_1" >Male</a><br />
        <input type="radio" id="GenderID" name="GenderID" value="2"/> <a href="" id="FilterOptionLink_CoupleGender_2" >Female</a><br />
        <input type="radio" id="GenderID" name="GenderID" value="0" checked="checked"/> <a href="" id="FilterOptionLink_CoupleGender_0" class="SearchSelectedChoice" >Any</a><br />
    </div>

当用户点击文字链接时，问题确实会出现。此时我需要知道要更改哪个无线电设备，将文本链接为粗体，并采用新选择的文本并更改我的标题标签。我看到了使这种类型的场景有效的几个选项。

使其运作的选项

---

具有聪明元素名称的jQuery注入

我可以使用jQuery以通用方式绑定到我的元素。 $('#FinderBodyDIV input:radio').click(SearchOption_Click);然后整理出适当的ID＆amp;聪明的dom检查文本。例如，名称我的超链接可以命名为GenderID_Link_1，其中1是我应该选择的ID，GenderID告诉我要更改哪个无线电设置。我可以使用'.parents（）。find（）and。siblings（）`的组合找到隔壁的收音机并用ID设置它。

• 这很好，因为我的绑定代码很简单，我的jQuery与HTML
分开
• 这很糟糕，因为我的代码现在正在运行，实际上取决于脆弱的HTML结构和命名。

使用eventData

单独绑定元素

另一种选择是收集我的元素集，并为每个单独的元素执行'bind（）'传递eventData。

var elements = $('#FinderBodyDIV input:radio');
elements.each (   FunctionWithLogicToBindPassingEventData );

• 这是令人满意的，因为我将用于绑定事件数据的逻辑与脆弱的HTML结构分开。
• 这很糟糕，因为我只是将脆弱的部分移到新功能
• 这也很糟糕，因为我引入了减慢（相对）绑定（更多DOM遍历）。

在HTML中嵌入onClick代码

这是我的旧JavaScript倾向一直带我的地方。我没有使用jQuery来注入绑定，而是更改了我的链接/单选按钮HTML以包含点击处理程序。有点像...

<input type="radio" id="GenderID" name="GenderID" value="1" onClick="SetGender(1,'Male')"/> <a href="" id="FilterOptionLink_Gender" onClick="SetGender(1,'Male')">Male</a><br />

• 这很令人满意，因为我知道生成HTML时的值，所以我简化了我的生活。
• 我删除了很多对HTML结构的依赖（虽然不是全部）。
• 在不利方面，我将JS和HTML混合在一起。
• 感觉很脏。

那么男孩该做什么？

---

这似乎是一种相当常见的情况。除了我上面描述的情况之外，我发现它会出现在很多情况下。我在Twitter上搜索了互联网，博客和技术文章。然而，我没有看到有人在谈论这个问题。也许我只是不知道如何说出这个问题。不管是什么原因，我对我提出的任何解决方案感到不满意。

这实际上归结为如何将点击的元素与其相关数据相关联 - JSON，嵌入HTML名称或其他方式。那你有什么看法？

Answer 1

pat答案是在输入元素中嵌入onClick调用违背了不引人注目的javascript概念。但是，我是那种开发人员，无论如何都会继续使用它，如果它完成了jorb并且观众不太可能禁用javascript。

如果我正确理解了这个问题，你需要一种方法来做事jQuery风格，而不依赖于html结构等。给你的单选按钮一个类名，例如，“男性”单选按钮可以有class =“Male”，你可以通过jQuery更容易地选择它。

奖励：在某些情况下，您可能需要为多个类分配一些元素，例如，您按语言和国家/地区进行过滤。所以你可以像这样分配一些元素：

$('#someElement').addClass('French').addClass('fr-FR');

稍后使用任一课程选择它。