5

具体来说，我说的是避免这种类型的代码：

<input type='text' id='title_33' class='title'
  onfocus='updateCharsLeft(33);' 
  onkeypress='updateCharsLeft(33);' />

在这里，我想将onfocus和onkeypress事件句柄分开放置，即放在一个 .js 文件中。像这样：

$(document).ready(function()
  {
    $(".title").focus(updateCharsLeft);
    $(".title").keypress(updateCharsLeft);
);

但是这里的问题是文本框的 ID 需要传递给函数updateCharsLeft()。不得不从该函数中的文本框的 ID 中提取 id 会很糟糕，因此将事件处理程序放入 HTML 代码中实际上会更干净。

想法？

4

8 回答 8

7

你不能这样做：

$(document).ready(function()
  {
    $(".title").focus(function() {
        updateCharsLeft(this.id);
    });
    $(".title").keypress(function() {
        updateCharsLeft(this.id);
    });
);

或更简洁：

$(document).ready(function()
  {
    $(".title .another .someother .andAnother").focus(function() {
        updateCharsLeft(this.id);
    }).keypress(function() {
        updateCharsLeft(this.id);
    });
);
于 2009-07-08T11:30:16.373 回答
2

我之前不得不做类似的事情，并且对解析 ID 属性的值也不满意。我可以建议的最好的事情是您使用另一个属性作为您需要的值，例如rel属性：

<input type='text' id='title_33' class='title' rel='33' />

或者根据您对验证的虔诚程度，只需使用自定义属性：

<input type='text' id='title_33' class='title' myval='33' />
于 2009-07-08T12:09:10.397 回答
1

我绝对认为您应该将 JavaScript 和 HTML 分开。它会更容易找到/维护，你可以编辑一个地方而不是 10 个。不要重复自己。

我会考虑使用jQuery 的实时功能。如果您有 10 个文本输入，则以这种方式添加 20 个事件处理程序，而不是 2 个（一个用于页面上的每个焦点处理程序，一个用于页面上的每个按键处理程序）。

还要重新评论你对卡里姆的评论，我不明白你为什么要复制自己。只要您在命名约定中保持一致，传递 id 或在必要时使用正则表达式对其进行转换应该是微不足道的。例如， this.id.replace(/.*(\d+)$/,''). 但是，传递直接 DOM 元素引用可能会更好，并在您的函数中使用它。

最后，您似乎认为这其中的某些方面会很糟糕。也许我错过了重点，但你能澄清一下 mainupaliting id 或 DOM 引用或你需要做的任何其他事情有什么困难吗？也许发布更长的代码示例来说明您接下来要做什么。

于 2009-07-08T12:08:45.470 回答
1

如果你真的不想通过，this.Id那么你可以在输入标签中添加一个自定义属性......

<input type='text' id='title_33' idSuffix='33' class='title'/>

然后你像这样设置事件处理程序......

$(document).ready(function()
{
    $(".title").focus(function() {
        updateCharsLeft(this.idSuffix);
    });
    $(".title").keypress(function() {
        updateCharsLeft(this.idSuffix);
    });
);

我个人喜欢自定义属性。它们提供了一种为 Html 标签提供自定义元数据并将其全部保存在标记中的方法。Html 验证器虽然不喜欢它们 :-(

于 2009-07-08T12:12:52.640 回答
0

我会尝试从单个 JavaScript 块管理所有事件。只要您能够引用页面上的元素，这应该是可能的。

于 2009-07-08T12:10:23.920 回答
0

您总是可以使用字符串函数来解析值并将其传递，例如

$(".title").focus(function() {
   var thisid = this.id;
   updateCharsLeft(thisid.substring(thisid.indexOf("_") + 1));
});

我不确定如果您必须为很多元素执行此操作会对性能产生什么影响。

于 2009-07-08T12:11:10.800 回答
0 
$(document).ready(function(){
    var update = function(){ updateCharsLeft(this.id.split("_")[1]); };
    $("input.title")
        .focus(update)
        .keypress(update);
});
于 2009-07-08T12:25:15.327 回答
0

这正是Unobtrusive Javascript 技术所关注的。

于 2009-07-08T12:28:34.140 回答