1

现在我有一个 ul 列表，其中包含许多单选按钮选项和一个单独的表。当用户从 ul 列表中单击一个选项时，它会在表中添加一行，其中包含 'category' 和 'select' li 属性（但是硬编码的）和一个供用户写笔记的文本区域。我是 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”，并且将有一个与 addRow1 过于相似的 jQuery 函数，其中 td 标记之间的信息已更改。

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

4

1 回答 1

0

您可以将点击绑定中的代码更改为：

$('.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"));
});
于 2013-04-17T14:17:01.720 回答