Question

我创建了一个类似以下的javascript函数：

function highlight_input() {
  $("input").css("background", "yellow");
}

$("#input1").highlight_input();
$("#input2").highlight_input();

现在我想在需要时突出显示两种输入类型！但两者都不应该一次突出显示！

Answer 1

您可以通过向jQuery.fn添加函数来创建basic plugin（扩展jQuery原型），其中this引用函数内的jQuery对象。

jQuery.fn.highlight_input = function() {
  // here this refers to the jQuery object , so 
  // you can apply jQuery methods without wrapping
  this.css("background", "yellow");
  // return the object reference to keep chaining
  return this;
}

$("#input1").highlight_input();
$("#input2").highlight_input();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input>

即使你可以将颜色作为参数传递，以防你想在某些情况下应用自定义颜色。

jQuery.fn.highlight_input = function(color) {
  // if argument is undefined use the default value
  // although you can return in the same line since 
  // css method returns the object reference
  return this.css("background", color || "yellow");
}

$("#input1").highlight_input();
// passing color as argument
$("#input2").highlight_input("red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input>

Answer 2

jQuery插件将完成这项工作

$.fn.highlight_input = function(){
  return this.css({background:"yellow"});
}

您还可以传递所需的颜色参数（将回退到黄色

$.fn.highlight_input = function(color) {
  return this.css({background: color||"yellow"});
}

使用

$("selector").highlight_input("#f80");

Jquery函数作为对象

2 个答案: