1

我是 jQuery 原型的新手。我多次执行相同的代码：

   $message
        .removeClass()
        .addClass("message error")
        .show()
        .html('<li>' + json.Errors.join('</li><li>') + '</li>');

这里的变量是“错误”和 html 数据。为了成功， addClass 将是“消息成功”。

有没有一种方法可以将这四个组合成一个函数，然后只调用一个并将成功/错误和数据传递给它？

4

2 回答 2

4

添加自己的 jQuery 函数很容易：

$.fn.showErrors = function() {
  return this.removeClass().addClass("message error").show()
    .html('<li>' + json.Errors.join('<li>'));
};

然后：

$message.showErrors();

请注意，您实际上并不需要</li>结束标签。

一般来说，像这样作为属性添加的 jQuery 函数$.fn应该期望this引用当前的 jQuery 对象。该函数应该返回该值，以便 jQuery 的正常链接行为将起作用。稍微令人困惑的一点是，因为this它已经$(this)是一个 jQuery 对象，所以无需再次包装它——换句话说，无需编写。

编辑— 抱歉，我已经离开互联网一段时间了（令人震惊！）该代码假定“json”只是漂浮在周围。它可能应该是一个参数：

$.fn.showErrors = function(json) {
  return this.removeClass().addClass("message error").show()
    .html('<li>' + json.Errors.join('<li>'));
};

调用它：

$message.showErrors(json);
于 2012-10-06T14:24:28.087 回答
0 
jQuery.fn.updateErrors = function(errors) {
  var cssClass, errorsHtml;

  if(errors.length === 0) {
    cssClass   = "success";
    errorsHtml = "";
  } else {
    cssClass = "error";
    errorsHtml = "<li>" + errors.join("</li><li>") + "</li>";
  }

  return this.removeClass().addClass("message " + cssClass)
             .show().html(errorsHtml);
};

它将根据errors数组是否为空来决定类应该是“错误”还是“成功”。当然，如果你的逻辑比这更复杂，这个函数也可以是它的家。

用法：

$message.updateErrors(json.Errors);
于 2012-10-06T14:32:14.820 回答