Question

所以我有两个文本框，我想以相同的方式操作。这是代码，它告诉文本框根据输入的文本调整其宽度：

$("#text1").keyup(function(){  
    var myLength = $("#text1").val().length;
    var widthNum = ((myLength+0.25)*30);
    if (myLength == 0) {
        $("#text1").animate({ width: 65 }, 'fast');
    }
    else {
        $("#text1").animate({ width: widthNum }, 'fast');
    }
});

我希望$("#text2")具有相同的代码行相同的属性。换句话说，我不想写另外10行。有没有什么方法可以在同一组代码中包含两个文本框？

感谢。

Answer 1

将两个input元素设为同一个类，然后您可以通过该类选择它们。在事件处理程序中，您可以使用this关键字来引用引发事件的元素。试试这个：

$(".text").keyup(function(){  
    var widthNum = ($(this).val().length + 0.25) * 30;
    $(this).animate({ width: myLength == 0 ? 65 : widthNum }, 'fast');
});

Answer 2

您只需按其ID引用这两个文本框，然后使用this让代码引用与之交互的文本框：

$("#text1, #text2").keyup(function(){  
    var myLength = $(this).val().length;
    var widthNum = ((myLength+0.25)*30);
    if (myLength == 0) {
        $(this).animate({ width: 65 }, 'fast');
    }
    else {
        $(this).animate({ width: widthNum }, 'fast');
    }
});

Answer 3

var x = function(e){
                //code here
             };

$("#text1").keyup(x);

$("#text2").keyup(x);

奖金：您也可以使用

$(e) // instead of $("#text1") or $("#text2") to get the calling DOM element

Answer 4

为他们提供一个唯一的类名.my-special-textboxes而不是$('#text1')使用$(.my-special-textboxes')，只要他们拥有此类名称，就可以使用任意数量的文本框

＆＃13;

$('.my-special-textboxes').keyup(function() {
  var myLength = $(this).val().length;
  var widthNum = ((myLength + 0.25) * 30);
  if (myLength == 0) {
    $(this).animate({ width: 65 }, 'fast');
  } else {
    $(this).animate({ width: widthNum }, 'fast');
  }
});

＆＃13;

其中$(this)表示正在输入的文本框

为两个文本框编写一组jQuery代码

4 个答案: