javascript - 绑定(bind)/单击上的 JQuery 参数注入(inject)与带有参数的嵌入式单击处理程序

Question

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

典型例子

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

用户可以通过单击文本(例如“女性”)或选择单选按钮来选择选项。

进行选择时，选择了相应的单选按钮，文本为粗体

我的 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 注入(inject)

我可以使用 jQuery 以通用方式绑定(bind)到我的元素。 $('#FinderBodyDIV input:radio').click(SearchOption_Click);然后通过巧妙的 dom 检查整理出适当的 ID 和文本。例如，将我的超链接命名为 GenderID_Link_1在哪里 1是我应该选择的 ID 和 GenderID告诉我要更换哪个 radio 。我可以使用 '.parents() 的组合.find() and .siblings()` 找到隔壁的 radio 并用 ID 设置它。

这很好，因为我的绑定(bind)代码很简单，而且我的 jQuery 与我的 HTML

是分开的。

这很糟糕，因为我的代码现在真正依赖于脆弱的 HTML 结构和命名。

使用 eventData 单独绑定(bind)元素

另一种选择是收集我的一组元素，并为每个单独的元素执行一个“bind()”传递 eventData。

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

这是令人满意的，因为我已经将绑定(bind)事件数据的逻辑与脆弱的 HTML 结构分开。

这很糟糕，因为我只是将脆弱的部分移到了一个新函数中

这也很糟糕，因为我引入了(相对)慢速绑定(bind)(更多的 DOM 遍历)。

在 HTML 中嵌入 onClick 代码

这就是我的旧 JavaScript 倾向不断带我去的地方。我没有使用 jQuery 注入(inject)绑定(bind)，而是将链接/单选按钮 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 调用违背了不显眼的 javascript 概念。但是，我是那种会继续使用它的开发人员，如果它完成工作并且观众不太可能禁用 javascript。

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

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

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

稍后使用任一类选择它。