所以我的老 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 设置它。使用 eventData 单独绑定(bind)元素
另一种选择是收集我的一组元素,并为每个单独的元素执行一个“bind()”传递 eventData。
var elements = $('#FinderBodyDIV input:radio');
elements.each ( FunctionWithLogicToBindPassingEventData );
在 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 />
那么男孩该怎么办呢?
这似乎是一个相当普遍的情况。除了我上面描述的情况之外,我发现它在很多情况下都会出现。我在互联网、博客和 twitter 上搜索了技术文章。然而,我没有看到有人谈论这个问题。也许我只是不知道如何表达这个问题。不管是什么原因,我对我提出的任何解决方案都不满意。
这实际上归结为我如何将点击的元素与其相关数据相关联——JSON、嵌入在 HTML 名称中或其他方式。那你怎么看?
最佳答案
答案是在输入元素中嵌入 onClick 调用违背了不显眼的 javascript 概念。但是,我是那种会继续使用它的开发人员,如果它完成工作并且观众不太可能禁用 javascript。
如果我正确理解了这个问题,你需要一种不依赖 html 结构等的方式来做 jQuery 风格的事情。给你的单选按钮一个类名,例如,“Male”单选按钮可以有 class="Male",你可以通过 jQuery 更轻松地选择它。
奖励:在某些情况下,您可能需要为某些元素分配多个类,例如,您正在按语言和国家/地区进行过滤。所以你可以像这样为一些元素分配多个类:
$('#someElement').addClass('French').addClass('fr-FR');
稍后使用任一类选择它。
关于javascript - 绑定(bind)/单击上的 JQuery 参数注入(inject)与带有参数的嵌入式单击处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4441930/