Javascript：如何使用jQuery在HTML上使用可变数量的标签在运行时添加文本

我有一个复选框和一个标签并排在html中。根据从服务器端返回的输出数量，可以有任意数量的复选框和标签。例如，如果从服务器返回5个输出，则会有5行（每行是1个复选框和1个标签）。Javascript：如何使用jQuery在HTML上使用可变数量的标签在运行时添加文本

要显示在标签上的文本是一个变量，并在运行时根据数据库返回的内容生成。使用下面的代码，我可以显示5行复选框和标签。如何在运行时更新文本id="labelFollowup"，以代替label它显示新的文本运行时？

$(function(){ 
    let div = '<div class ="followupSteps">'+ 
    '<input type="checkbox" id="checkboxFollowup">'+ 
    '<label for="checkboxFollowup" id="labelFollowup">label</label>'+ 
    '</div>'; 
    for(var index=0; index<5; index++) 
    { 
     $('table').append('<tr> <td>'+div+' </td> </tr>') 
    } 
});

而且对HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
<tr> 
</tr> 
</table>

来源

2017-08-24 nad

给我的答案一看，就应该扩大你的想法，并清理行动一点点。 – Relic

@Relic这很明显，你回答如下，[不需要]（https://stackoverflow.com/users/1450312/lilyhack）*“嘿，看！”*） –

@ RokoC.Buljan即使我的名声可能会导致有些人不相信，我通常只在我遇到的问题中使用它。所以我不确定OP是否会收到答复或评论的通知，所以我尝试了两种方式。：D – Relic

首先，你应该让你的ID标签和独特的输入。试试这个：

$(function(){ 
 
    let data = ['one','two','three','four','five']; 
 
    for(var index=0; index<5; index++) 
 
    { 
 
    let div = '<div class ="followupSteps">'+ 
 
    '<input type="checkbox" id="checkboxFollowup'+index+'">'+ 
 
    '<label for="checkboxFollowup'+index+'" id="labelFollowup'+index+'">'+data[index]+'</label>'+ 
 
    '</div>'; 
 
    
 
    
 
     $('table').append('<tr> <td>'+div+' </td> </tr>') 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
</tr> 
 
</table>

来源

2017-08-24 21:18:52

而不是硬编码'1'这里$（'＃labelFollowup1'）。text（'hi'）;;我怎样才能做到这一点，没有硬编码，只取决于索引值是什么？ – nad

@lilyhack这只是一个例子。我不知道你想在哪里改变这些标签。你想在循环中做到吗？ –

是的，但是它的工作原理是，当我在循环中时我有数据可用。我只是不想显示那些硬编码标签，需要显示我从数据库中获得的数据。 – nad

试试这个：

$(function(){ 
    const div = '<div class ="followupSteps">'+ 
    '<input type="checkbox" id="checkboxFollowup-{{labelId}}">'+ 
    '<label for="checkboxFollowup" id="labelFollowup">label {{labelId}}</label>'+ 
    '</div>'; 
    const tr = '<tr> <td>'+div+'</td> </tr>'; 
    const rows = new Array(5).fill(tr).map((tr, index) => tr.replace(/{{labelId}}/g, index+1)).join(""); 
    $('table').append(rows) 
});

label 1 label 2 label 3 label 4 label 5

来源

2017-08-24 21:22:56 Relic

Javascript：如何使用jQuery在HTML上使用可变数量的标签在运行时添加文本

回答

相关问题