Question

这是我的第一篇文章，所以请放轻松我：）

我正在尝试创建一个名为alertControls（）的可重用函数。我试图在函数中调用的html字符串中创建可以替换的参数位，但是当我尝试这样做时会出错。我尝试了几种不同的方法但很困惑为什么这在JS中不起作用：

function alertControls(parent, icon, alert, message) {
  parent = "form-group has-warning has-feedback";
  icon = "warning-sign";
  alert = "warning";
  message = "Password too short";

  $(this).closest("div").removeClass();
  $('.alert').remove();
  $('span').not('.input-group-addon,.hidden-xs,.caret').remove();
  $(this).closest("div").addClass(parent);
  $(this).before('<span class="glyphicon glyphicon-' + icon + 'form-control-feedback" aria-hidden="true"></span>');
  $(this).closest("div").append('<div class="alert alert-' + alert + ' alert-strong is-attached"><em class="glyphicon glyphicon-remove-sign"></em> <strong>' + message + '</strong></div>');
}

然后我希望能够在函数html中重用不同的值：

alertControls("form-group has-error has-feedback", "error-sign", "error", "Not valid");

非常感谢您的帮助

Answer 1

您正在为参数指定新值。如果我已经理解了问题，您应该将其更改为：

message = message || "Password too short";等等。

您对this的使用不正确。也许您必须传递另一个属性，比如element并使用它而不是$(this)所以它会是：

if ($('input#test').val() === "" ) { alertControls($('input#test'), "form-group has-error has-feedback", "error-sign", "error", "Not valid"); }

Answer 2

你做了什么：

function a(b){
 b=1;//overides b
 return b;
 }
 a(5);//returns also 1

您覆盖a的值。根本不要这样做。如果您想要一个标准值，即在没有传递值时使用，您可以使用新的ECMA6语法：

function a(b=1){
return b;
}
a();//returns 1
a(5); //returns 5

问题2： “this”返回函数的父对象。如果你在js中调用你的函数，这将是window对象。

function a(){
 return this;
}
a(); //will return window

所以你需要以另一种方式获取元素，可能将它传递给函数或使用：

$("#uniqueselector")

Answer 3

您可以将元素选择器作为附加参数传递（使其成为第一个）：

function alertControls(selector, parent, icon, alert, message) {
  // define default values, but only use them when no value supplied:
  parent = parent || "form-group has-warning has-feedback";
  icon = icon || "warning-sign";
  alert = alert || "warning";
  message = message || "Password too short";

  // get element(s) for selector, and use that instead of `this`
  var $elem = $(selector);
  $elem.closest("div").removeClass();
  $('.alert').remove();
  $('span').not('.input-group-addon,.hidden-xs,.caret').remove();
  $elem.closest("div").addClass(parent);
  $elem.before('<span class="glyphicon glyphicon-' + icon + 'form-control-feedback" aria-hidden="true"></span>');
  $elem.closest("div").append('<div class="alert alert-' + alert + ' alert-strong is-attached"><em class="glyphicon glyphicon-remove-sign"></em> <strong>' + message + '</strong></div>');
}

这样称呼：

alertControls("input#test", "form-group has-error has-feedback", "error-sign", "error", "Not valid");

您也可以考虑创建一个jQuery插件，然后使用以下语法：

$("input#test").alertControls("form-group has-error has-feedback", "error-sign", "error", "Not valid");

但对于这个特殊情况，我不认为它有用。 jQuery插件不应该像您在代码中那样具有依赖关系，期望存在父div，以及具有类alert等的元素。

函数参数作为文本无效

3 个答案: