Question

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

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

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

有没有办法可以将这四个函数合并为一个函数，然后调用一个并将其传递给成功/错误和数据？

Answer 1

添加自己的jQuery函数很简单：

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

然后：

$message.showErrors();

请注意，您并不需要</li>结束标记。

在genra中，像$.fn的属性一样添加的jQuery函数应该期望this引用当前的jQuery对象。该函数应该返回该值，以便jQuery的正常链接行为可以工作。有点令人困惑的是，因为this是 alread 一个jQuery对象，所以不需要再次包装它 - 换句话说也不需要写$(this)。

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

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

打电话给：

$message.showErrors(json);

Answer 2

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);

我可以用原型功能简化这个吗？

2 个答案: