Question

当用户点击无序列表中某个项目的图标时，是否有办法触发操作？（在javascript和/或jquery中）

Answer 1

嗯，如果没有您的代码并标记，很难猜测，但您可以尝试这样的事情。

HTML

<ul>
  <li>
    <a href="" class="icon"></a>
    <a href="" class="icon"></a>
    <a href="" class="icon"></a>
  </li>
</ul>

JS

$(function() {
  $('a.icon').on('click', function(){
    //your code here...
  });
});

我不知道你的'icon'是什么html标签，但这个方案适用于你尝试的任何内容，只需替换元素的<a>并添加类icon

Answer 2

是的，如果您愿意，您可以只定位列表项目标记，但它需要将每个项目的内容包装在另一个标记中。

这是有效的，因为当您为<li>元素分配事件处理程序时，该元素或任何子元素将触发处理程序。然后在处理程序中，您可以检查nodeName，它会告诉您是否单击了<li>或者它是否是子元素。由于所有内容均由<span>或<div>包裹，因此只有列表项标记才会触发目标为<li>的事件。

以下可运行示例仅在单击列表项标记时触发警报，否则将忽略click事件。

$("li").on('click', function(e) {
    if (e.target.nodeName === "LI") {
        alert('You clicked the list item marker');
    } else {
        e.preventDefault(); //a child element was clicked
    }   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
</ul>

Answer 3

是的...使用JQUERY。

<ul>
    <li>
      <a href="" class="item">Item1</a>
      <a href="" class="item">Item2</a>
    </li>
<ul>

然后在你的javascript使用：

$(".item").click(function() {
   var itemIcon = $(this);
   // itemIcon contains the icon that was clicked. Do something with it... 

});

点击html无标记列表上的项目标记可以触发事件吗？

3 个答案: