Question

我有一个for循环用于循环一个div数据和峰值按钮。

我试过的代码：

 for(i=0; i<response.data.length; i++){
           var job = '<div class="job-headers">';
           job += '<h3>'+response.data[i].job_title+'</h3>';
           job += '<h5>'+response.data[i].location+'</h5>';
           job += '<h5>'+response.data[i].description+'</h5>';
           job += '<h5> Created on :'+response.data[i].created_at+'</h5>';
           job += '<h5> Status :'+response.data[i].job_status+'</h5>';
     **show****job += '<div><h2>Title: ' + response.data[i].job_title + <h2>;
          job  += '<h2>Title: ' + response.data[i].job_role + <h2>';    
          $job+= '</div>'
         ****** job += '<input type="submit" class="submit-button" value="submit">';
           $(".submit-button").click(function() {
                     $(this).prev('div').toggle();
                  });

                  job += '</div>';
                   $('#job-preview').append(job);
                 }
             });
        });

第一个按钮只显示第一个div第二个按钮不起作用？任何想法???

Answer 1

问题是因为您在循环中创建了具有相同id属性的多个元素。这是无效的，因为它们在DOM中必须是唯一的。这就是它仅适用于第一个按钮的原因。

要解决此问题，请删除id属性并在按钮元素上使用公共类。然后，您可以创建绑定到所有这些按钮的单个事件处理程序。您可以使用DOM遍历仅相对于单击的按钮切换div，如下所示：

var response = {
  data: [{
    job_title: 'Title 1',
    job_role: 'Role 1'
  }, {
    job_title: 'Title 2',
    job_role: 'Role 2'
  }]
}

for (i = 0; i < response.data.length; i++) {
  var job = '<div class="job-headers">';
  job += '<h3>' + response.data[i].job_title + '</h3>';
  // other fields...
  job += '<div><h2>Title: ' + response.data[i].job_title + '</h2>';
  job += '<h2>Title: ' + response.data[i].job_role + '</h2></div>'
  job += '<input type="submit" class="submit-button" value="submit">';
  job += '</div>';
  $('#job-preview').append(job);
}

$(".submit-button").click(function() {
  $(this).prev('div').toggle();
})

.job-headers>div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="job-preview"></div>

根据jquery中的按钮单击show div动态添加Button id

1 个答案: