当索引页面上的项目单击时发布 ajax

post ajax when item on index page clicked

本文关键字：单击 ajax 项目 索引      更新时间：2023-09-26

我有一个索引页，用户可以一次激活一个项目。当用户单击激活按钮时，我想对项目执行某些操作。我的困境是如何识别页面上单击了哪个项目。有没有办法让我有 1 个 javascript 函数来处理任何点击的项目？

.html：

<ul>
  <li> item 1 </li>  
  <li> item 2 </li>  
  <li> item 3 </li>
</ul>

.js：

  $('.li').click(function() {
    $.ajax({
      url: "/activate,
      type: 'post',
      dataType: "json",
      data: {
        item: { id: 1 }
      },
      success: function(data){
        alert("you did it")
      }
    })
  })

要扩展其他注释，一旦修复了其他错误（例如选择器、缺少分号等），您就可以使用 this 变量来检索您要查找的信息。此外，您可以为每个 li 元素添加一个 id，以便您知道您正在查看哪一个。例如：

.HTML

<ul>
  <li id="li1"> item 1 </li>  
  <li id="li2"> item 2 </li>  
  <li id="li3"> item 3 </li>
</ul>

爪哇语

$('li').click(function() {
    console.log($(this).attr('id'));
});

如果您尝试选择 <li> 元素，请在 jQuery 中将.li更改为li（只需删除点）。

仅在选择类时使用点"."（"#"表示选择 id）。所以基本上你一直在选择一个名为 li 的类，而不是元素<li>

选择所需的元素后，在 jQuery 选择器中，您可以使用$(this)来引用单击的同一元素。

例如：

更改颜色

$("li").click(function(){
  //Button was clicked
  $(this).css("color", "#ff0000"); // Change color of clicked li
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>test 1</li>
  <li>test 2</li>
</ul>

event传递给处理单击的函数的参数。从中您可以找到目标元素：

$('.li').click(function(event) {
   var target = event.target;
   ....
});

另一种方法是this指标：

$('.li').click(function() {
 $(this).text();
});
相关文章：