jQuery:如何确定点击了哪个<li>标签？

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>项目中的每一项都指其各自的一行.

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

Answer 1

在单击处理程序的回调中,this引用单击的<li>.您可能希望仅为这些列表项添加一个类,或者将它们放在具有此类的div中,这将允许您将它们作为目标并将事件绑定到它们.另外,请注意alt这里无效,您可能正在寻找title.

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

您可能希望将隐藏字段设置为该值.你可以这样做,例如,通过添加$('#hiddenJustify').val(justify).

由于您有五组这些<li>,您可能希望将它们分组在一个元素下.例如:

<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);

然后,这些项目将发布到服务器.