通过循环内的条件更改附加的 td答案

【问题标题】：Change appended td by condition inside loop通过循环内的条件更改附加的 td
【发布时间】：2020-09-20 10:19:26
【问题描述】：

我正在使用 javascript 将行和列附加到表中。但是我需要 td 中的一个类名，基于 `$.post() 响应中的条件。

我这样做了：

let arr = ['Hermione', 'Ron', 'Harry']

arr.forEach(d=>{
    $('#the_table>tbody').append(` 
                <tr id='tr_${d}'>
                    <td'>${d}</td>
                    <td><i id='change' class='no'></i></td>
                </tr>
            `);
});

const myfunc = () => {
$.post(api, json_object,
    function(data, status) {
        if (data.value === 'started') {
        setTimeout(myfunc, 5000);
    } else {
        $('#change').removeClass('no').addClass('yes');
        }
}, 'json');
            }
myfunc();

当我这样做时，它只会更改第一个值 (Hermione) 的值。但是在console.log 中，我可以看到data.value 不是started，所以它应该更改为yes。

一旦条件通过，我可以将每一行的它更改为yes

【问题讨论】：

您有多个元素具有相同的 id 值，这是不允许的。您需要找出一种区分它们的方法（您可以使用.forEach 中的索引，但您还需要从您的.post 调用中返回一个索引）

标签： javascript jquery json post append

【解决方案1】：

$('#change').removeClass('no').addClass('yes');

你需要修复这个选择器 $('#change')

我不知道api返回是否有id

但你需要像这样选择它

$(`tr#${data.something} #change`)

【讨论】：

【解决方案2】：

你能提供 JSfiddle 或任何在线代码设置来调试更多吗？我可以看到第一个元素是没有被忽略的单引号。 ${d} 应该是这样 ${d}

谢谢

【讨论】：

【解决方案3】：

问题是您使用相同的id name 来识别许多不同的行。每个 ID 必须是唯一的。因此，如果您有许多要操作的元素，最好通过它们的 classname 来识别它们。将属性ID 更改为CLASS，如下图所示。

 // I have only change the attribute id to class
 let arr = ['Hermione', 'Ron', 'Harry']

 arr.forEach(d=>{
 $('#the_table>tbody').append(` 
     <tr id='tr_${d}'>
       <td'>${d}</td>
       <td><i class='change' class='no'></i></td>// now their identified by class name
            </tr>
        `);
  });

 const myfunc = () => {
 $.post(api, json_object,
     function(data, status) {
         if (data.value === 'started') {
             setTimeout(myfunc, 5000);
         } else {
            $('.change').removeClass('no').addClass('yes');  
         }
     }, 'json');
 }

 myfunc();

【讨论】：