Question

我有一系列输入字段，我已经给出了类 replaceInput 。这一点的关键是有一个简单的函数，当用户在字段中聚焦时将值替换为空，如果焦点为空时字段为空则将其恢复为X.

我的问题是，这是一个语法错误还是有可能当我将逻辑移动到分离函数这个不适用于该类？如果我只是使用该类，则每次都是空的。

HTML

<input id="goal" class="biggerFont replaceInput"  value="X" >

jQuery和javascript

$( ".replaceInput" ).focusin(function() {
        placeholderFix('X', '');

            //OLD  WORKING CODE
              /*if ($(this).val() == 'X') {
                $(this).val('');
              };*/
          });



function placeholderFix(oldValue, newValue){
  $(this).val() == oldValue ? $(this).val(newValue): $(this).val(oldValue);
}

Answer 1

您应该将该对象传递给新函数。在placeholderFix方法中，this未引用输入元素。

$( ".replaceInput" ).focusin(function() {
        placeholderFix('X', '',this);

            //OLD  WORKING CODE
              /*if ($(this).val() == 'X') {
                $(this).val('');
              };*/
          });



function placeholderFix(oldValue, newValue,obj){
  $(obj).val() == oldValue ? $(obj).val(newValue): $(obj).val(oldValue);
}

Answer 2

您可以使用bind()

bind（）方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

代码的

$(".replaceInput").focusin(function () {
    placeholderFix.bind(this)('X', '');
});

function placeholderFix(oldValue, newValue) {
    $(this).val() == oldValue ? $(this).val(newValue) : $(this).val(oldValue);
}

Simplified DEMO

Answer 3

您可以使用call使用自定义this参数调用您的函数：

$( ".replaceInput" ).focusin(function() {
    placeholderFix.call(this, 'X', '');
});

function placeholderFix(oldValue, newValue){
    $(this).val() == oldValue ? $(this).val(newValue): $(this).val(oldValue);
}

Answer 4

替换此行代码

placeholderFix('X', '');

到

placeholderFix('X', '' , this);

以便this引用输入元素。

类和带有函数的这个

4 个答案: