jQuery:如何确定哪个 标签被单击？

Question

我正在创建一个包含 5 行文本的表单，每个文本都允许用户选择是否希望文本居中、左对齐或右对齐。我有一个未编号的列表，其中列表元素为 x5。

<li><img src="images/justify_left.png" alt="left" /><span>Justify Left</span></li>
<li><img src="images/justify_center.png" alt="center" /><span>Justify Left</span></li>
<li><img src="images/justify_right.png" alt="right" /><span>Justify Left</span></li>

共 5 套 <li> items 指的是其各自的行。

使用 jQuery，我将如何确定 15 <li> 中的哪一个？用户选择的项目以便我可以将正确的理由对应为发布方法？

Answer 1

在点击处理程序的回调中，this指点击的<li> 。您可能只想为这些列表项添加一个类，或者将它们放在具有此类的 div 中，这将允许您定位它们并将事件绑定(bind)到它们。另请注意 alt此处无效，您可能正在寻找 title .

$('li').click(function(){
   var justify = $(this).attr('alt');
   alert(justify);
});

您可能想要将隐藏字段设置为该值。例如，您可以通过添加 $('#hiddenJustify').val(justify) 来做到这一点.

因为您有五组 <li> s，您可能希望将它们分组到一个元素下。例如:

<div class="line-justify-group">
   <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
   </ul>
   <input type="hidden" name="line1justify" id="line1justify" class="justify-value" />
</div>

然后您可以使用以下代码进行设置:

$(this).closest(".line-justify-group").find(".justify-value").val(justify);

然后这些项目将被发布到服务器。