JQuery循环通过变量来改变元素

Question

全新的JQuery，请阅读以下部分文档：

https://api.jquery.com/click/

我尝试在用户点击时将输入从禁用更改为启用。我用这个代码工作正常：

$('#edit1').click(function(){
        $('#doc1').removeAttr('disabled');
});

然后我想为edit1和doc1的每个值循环遍历它，即edit2和doc2 ......等。

我试过这个：

$(document).ready(function () {
        var max = 6;
        var i = 0;
        var x = 0

        if (x < max) {
            i++
            x++;

            $('#edit${i}').click(function () {
                $('#doc${x}').removeAttr('disabled');
            })
        }
    };

在这里可以看到：

http://jsfiddle.net/Rockhopper92/9oapaf1k/

现在这对我来说“看起来”不对，但不能指责它。我有一种感觉，这与我打开和关闭括号的地方或一些真正的基本错误有关，比如开头行'$（document）.ready（function（）'

这是我第一次尝试使用JQuery，因此任何一般指针对我都是一个巨大的帮助。

Answer 1

多个问题，updated fiddle

• 使用if代替while
• 执行index时未执行x并使用max的{​​{1}}未正确执行。
• 未使用click的右括号)。

<强>演示

document.ready

$(document).ready(function() {
  var max = 6;
  var i = 0;

  while (i < max) {
    i++;

    $('#edit' + i).click(function() {
      var index = this.id.substring( 4 );
      $('#doc' + index).removeAttr('disabled');
    })
  }
});

注意

• 我正在使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"> </script> <div class="row"> <div class="content"> <div id="edit1"> <input type="text" id="doc1" value="Document 1" disabled><i class="far fa-edit"></i> </div> <div id="edit2"> <input type="text" id="doc2" value="Document 2" disabled><i class="far fa-edit"></i> <br> </div> <div id="edit3"> <input type="text" id="doc3" value="Document 3" disabled><i class="far fa-edit"></i> <br> </div> <div id="edit4"> <input type="text" id="doc4" value="Document 4" disabled><i class="far fa-edit"></i> <br> </div> <div id="edit5"> <input type="text" id="doc5" value="Document 5" disabled><i class="far fa-edit"></i> <br> </div> <div id="edit6"> <input type="text" id="doc6" value="Document 6" disabled><i class="far fa-edit"></i> <br> </div> </div> </div>的简单连接而不是模板文字。

Answer 2

您可能会发现更容易使用类而不是ID。将edit类附加到每个div，然后使用jQuery选择器定位它们。这样你就不必使用循环。

您使用$('.edit')定位该类，然后在回调中定位当前选择器上下文中的input（this）。然后，您可以关闭禁用属性。

（在HTML中，我用替换占位符替换了值。）

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.edit').on('click', function() {
    $('input', this).prop('disabled', false);
  });
});

＆＃13;

.row {
  width: 100%;
}

.content {
  width: 90%;
  text-align: center;
}

input[type=text] {
  padding: 6px 10px;
  margin: 8px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  box-sizing: border-box;
}

＆＃13;

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="content">
    <div class="edit">
      <input type="text" id="doc1" placeholder="Document 1" disabled><i class="far fa-edit"></i>
    </div>
    <div class="edit">
      <input type="text" id="doc2" placeholder="Document 2" disabled><i class="far fa-edit"></i>
      <br>
    </div>
    <div class="edit">
      <input type="text" id="doc3" placeholder="Document 3" disabled><i class="far fa-edit"></i>
      <br>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果你想使用模板文字，请使用反引号``而不是''，否则你可以使用普通的javascript：

$('#edit'+ i).click(function(){
        $('#doc'+x).removeAttr('disabled');
  })

类似的东西：

$(document).ready(function() {
var max = 6;
var i = 0;
var x = 0

if(x < max){
i++
x++;

$('#edit'+ i).click(function(){
        $('#doc'+x).removeAttr('disabled');
  })
}
});

Answer 4

试试这个：

$(document).ready(function () {
    var max = 6;
    var i = 0;
    var x = 0; //no need

    for (i=0;i<=max;i++) {    

        $('#edit'+i).click(function () {
            $('#doc'+i).removeAttr('disabled');
        })
    }
};

Answer 5

$(document).ready(function() {
	// Find all divs with id which starts with edit and listen for a click event
   $('[id^="edit"]').click(function() {
     // find the input for the clicked div
     var doc = $(this).find($('input'));
     // remove the attribute
     doc.removeAttr('disabled');
  });
});

.row {
  width: 100%;
}

.content {
  width: 90%;
  text-align: center;
}

input[type=text] {
  padding: 6px 10px;
  margin: 8px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">


</script>

<div class="row">
  <div class="content">
    <div id="edit1">
      <input type="text" id="doc1" value="Document 1" disabled><i class="far fa-edit"></i>
    </div>

    <div id="edit2">
      <input type="text" id="doc2" value="Document 2" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit3">
      <input type="text" id="doc3" value="Document 3" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit4">
      <input type="text" id="doc4" value="Document 4" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit5">
      <input type="text" id="doc5" value="Document 5" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit6">
      <input type="text" id="doc6" value="Document 6" disabled><i class="far fa-edit"></i>
      <br>
    </div>
  </div>
</div>

有几种方法可以在不使用循环的情况下完成此操作。

您可以在元素中添加一个类并侦听点击事件。

$('.yourClass').click(function(){
 $(this).removeAttr('disabled');
});

您还可以收听ID以字母开头的元素的每次点击。

如果您知道元素类型，那么:(例如：将'element'替换为'div'）

$("element[id^="edit"]").click(function(){
 $(this).removeAttr('disabled');
});

如果您不知道元素类型：

$("[id^="edit"]").click(function(){
 $(this).removeAttr('disabled');
});

Answer 6

试试这个解决方案：

当您单击编辑图标时，这将启用/禁用相应的输入。

$(document).ready(function()
{
     $(document).on("click", ".fa-edit" , function(e)
   {
      var element = $(this);
      if(element.parent().children('input').attr('disabled') == 'disabled')
      element.parent().children('input').attr('disabled' , false);
      else
      element.parent().children('input').attr('disabled' , true);


   });

});