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

Posted 2023-05-08

【中文标题】通过循环内的条件更改附加的 td

【英文标题】：Change appended td by condition inside loop

【发布时间】：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 调用中返回一个索引）

【参考方案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();