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

Question

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

典型例子

---

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

• 用户可以通过单击文本（例如“ Female”）或选择单选按钮来选择一个选项。
• 做出选择后，将选择适当的单选按钮，文本将以粗体显示

我的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 Injection

我可以使用jQuery以通用方式绑定到我的元素。 $('#FinderBodyDIV input:radio').click(SearchOption_Click); 然后通过聪明的dom检查来挑选出合适的ID和文本。 例如，将我的超链接命名为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

最好的答案是将onClick调用嵌入到input元素中违反了简洁的javascript概念。 但是，我是那种会继续完成工作并且观众不太可能禁用javascript的开发人员。

如果我正确地理解了问题，则需要一种无需依赖html结构等即可执行jQuery样式的方法。 给单选按钮指定一个类名，例如，“ Male”单选按钮可以具有class =“ Male”，并且您可以通过jQuery轻松选择它。

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

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

并在以后使用任一类选择它。