Question

现在我有一个ul列表，其中包含许多单选按钮选项和一个单独的表。当用户单击ul列表中的选项时，它会向包含'category'和'select'li属性（但硬编码）的表添加一行，并为用户写一个textarea以写入注释。我是jQuery的新手，所以现在一切都是硬编码的，这显然不太理想。

这是我现在的代码示例。首先，基本列表用户从以下选项中选择：

<ul class="current_medication">
      <li class="category" title="Chronic Pain Referral">Chronic Pain Referral
        <ul>
        <li class="select" title="Chronic referral"><input type="radio" class="addRow1" id="radio1" name="modalities" value="1">
           <label for="radio1">Chronic referral</label></li>
        </ul>
      </li>

然后jQuery代码在用户点击无线电选项时添加一个表行：

$('.addRow1').click(function() {
$('.mainTable > tbody:last').one().append('<tr style="text-align:center"><td>Chronic Pain Referral</td><td>Chronic referral</td><td><textarea name="notes"></textarea></td></tr>');
});

正如您所看到的那样，它是硬编码的，因此列表中的另一个选项将具有类“addRow2”，并且将有一个jQuery函数，它与addRow1太相似，并且td标记之间的信息已更改。

我想要的是能够通过某种方式读取类别的标题属性并选择'li'来自动执行此操作，这样我就可以为它们设置一个addRow函数。我假设答案在某处.attr（）但是我不知道如何从单击的单选按钮读取它然后从前面的'li'中获取相关信息，该li'最接近包含title属性的单选按钮

Answer 1

您可以将点击装订中的代码更改为：

$('.mainTable > tbody:last').one().append(
    '<tr style="text-align:center"><td>' 
  + $(this).closest("li.category").attr("title")
  + '</td><td>'
  + $(this).closest("li.select").attr("title")
  + '</td><td><textarea name="notes"></textarea></td></tr>');
});

（如果我确实理解你的问题）。

但请注意，它不会转义HTML，例如，如果您的类别<li>是：

<li class="category" title="Chronic Pain &lt;b&gt;Referral">

（它会显示慢性疼痛推荐）。

所以我宁愿这样做：

$('.addRow1').click(function() {
 var tr = $(
    '<tr style="text-align:center"><td class="cat"></td>' 
  + '<td class="sel"></td>'
  + '<td><textarea name="notes"></textarea></td></tr>');
 $('.mainTable > tbody:last').one().append(tr);
 tr.find(".cat").text($(this).closest("li.category").attr("title"));
 tr.find(".sel").text($(this).closest("li.select").attr("title"));
});

使用jQuery从列表中动态读取属性

1 个答案: