在jQuery中，for语句是如何工作的？

Question

我目前正在为我的项目使用此代码，但我可以提供帮助，但我觉得可以使用for语句。

$("#login-1").text($("#" + iconId).data("login1"));
$("#login-1").click(function() {
   var send='';
   send += $("#" + iconId).data("name")+"</br>";
   send += $("#" + iconId).data("login1")+"</br>";
   send += $("#" + iconId).data("username1")+"</br>";
   send += $("#" + iconId).data("password1")+"</br>";
   $("#post").html(send);
   cancel();
});

$("#login-2").text($("#" + iconId).data("login2"));
$("#login-2").click(function() {
   var send='';
   send += $("#" + iconId).data("name")+"</br>";
   send += $("#" + iconId).data("login2")+"</br>";
   send += $("#" + iconId).data("username2")+"</br>";
   send += $("#" + iconId).data("password2")+"</br>";
   $("#post").html(send);
   cancel();
});

$("#login-3").text($("#" + iconId).data("login3"));
$("#login-3").click(function() {
   var send='';
   send += $("#" + iconId).data("name")+"</br>";
   send += $("#" + iconId).data("login3")+"</br>";
   send += $("#" + iconId).data("username3")+"</br>";
   send += $("#" + iconId).data("password3")+"</br>";
   $("#post").html(send);
   cancel();
});

在大多数代码行之间唯一变化的是login# username# password#上的数字

Answer 1

您可以使用：

$("#login-1,#login-2,#login-3").click(function(){
    ...
});

并根据$(this)修改其中的代码。

Answer 2

下面是如何通过创建函数并传递必要的参数来进行优化：

function doChanges(number, iconId) {
  $("#login-" + number).text($("#" + iconId).data("login" + number));
  $("#login-" + number).click(function() {
    var send = '';
    send += $("#" + iconId).data("name") + "</br>";
    send += $("#" + iconId).data("login" + number) + "</br>";
    send += $("#" + iconId).data("username" + number) + "</br>";
    send += $("#" + iconId).data("password" + number) + "</br>";
    $("#post").html(send);
    cancel();
  });
}

示例：

doChanges(1, iconId);
doChanges(2, iconId);
doChanges(3, iconId);

我不确定，iconId是相同的还是变化的。如果它是相同的，你可以从函数参数中去掉它，它会变得更简单。

Answer 3

function looping(length) {  
  for(var i=1;i<=length;i++) {
    $("#login-"+i).text($("#" + iconId).data("login"+1));
    $("#login-"+i).click(function() {
       var send='';
       send += $("#" + iconId).data("name")+"</br>";
       send += $("#" + iconId).data("login"+i)+"</br>";
       send += $("#" + iconId).data("username"+i)+"</br>";
       send += $("#" + iconId).data("password"+i)+"</br>";
       $("#post").html(send);
       cancel();
    });
  }
} 
looping(3);

我想这就是你所期待的。'+‘运算符将连接循环中的数字变量i。这里的$("#login-"+i)第一次将显示为("#login1")，然后对于i=2，它将显示为("#login2")，依此类推。