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，我如何确定用户选择的15个<li>项目中的哪一个，以便我可以将正确的理由作为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);

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

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $('#list1 li').bind("click", function(e)
    {
        e = e || window.event;
        var ul = $(this).parent();
        var index = ul.children().index(this);
        alert(index);
    });
});
</script>
</head>
<body>
<ul id="list1">
<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>
</ul>
</body>
</html>

Answer 3

为每个li或img或span标记赋予它唯一的id属性。与示例中的alt文本相同的值就足够了

假设你有li或img或span标签的onclick事件，你可以将jquery这个对象传递给函数，然后获取alt属性。

onclick="getJustification($(this));"

然后在getJustification中：

getJustification(selectedObj)
{
 if(selectedObj.attr('id') == 'left') ... // for each unique id
}

注意：代码是在没有引用的情况下编写的。希望它可以推动你朝着正确的方向发展。

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

3 个答案: