点击事件如何传递<li>的id或value值？

Question

我想在onclick事件中传递<li>元素的id或value。这是我的现有代码。

<li onclick="getPaging(this.value)" id="1" value="1">1</li>
<li onclick="getPaging(this.value)" id="2" value="2">2</li>

这里是 JavaScript 代码

function getPaging(str)
{
$("#loading-content").load("dataSearch.php?"+str, hideLoader);
}

- Sasindu H

---

如果您要使用jQuery，在标记中没有JavaScript的情况下是没有借口/理由的。所有事件都应该在HTML之外连接。 - Justin Johnson

@JustinJohnson 但是为什么？使用onclick似乎更自然和方便。 - Dmitry Ryadnenko

@nickes 简而言之：因为关注点分离。以下是我能想到的几个原因。将行为（JS）与内容（HTML）混合在一起可能看起来很方便，但在非微不足道的项目中，它很快就会变成一个缺点。当附加多种类型的事件处理程序时，它会创建混乱。它经常会迫使您在DOM中存储状态。https://dev59.com/-2025IYBdhLWcg3wqn0N - Justin Johnson

Answer 1

尝试像这样...

<script>
function getPaging(str) {
  $("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
</script>

<li onclick="getPaging(this.id)" id="1">1</li>
<li onclick="getPaging(this.id)" id="2">2</li>

或者不显眼地

$(function() {
  $("li").on("click",function() {
    showLoader();
    $("#loading-content").load("dataSearch.php?"+this.id, hideLoader);
  });
});

只使用

<li id="1">1</li>
<li id="2">2</li>

- Anish

---

谢谢你的回答。不过，我建议使用HTML data-*属性代替“id”。 - Pranav Shah

Answer 2

<li>标签没有value属性，只有表单输入才有。事实上，你甚至不应该在<li>的HTML中包含value属性。

你可以依赖于.innerHTML代替：

getPaging(this.innerHTML)

或者是id：

getPaging(this.id);

然而，从JavaScript代码中添加点击处理程序要更容易（也是更好的做法），而不是在HTML中包含它们。既然你已经在使用jQuery，那么可以通过将你的HTML更改为以下内容来轻松完成：

<li class="clickMe">1</li>
<li class="clickMe">2</li>

并且使用以下JavaScript代码：

$(function () {
    $('.clickMe').click(function () {
        var str = $(this).text();
        $('#loading-content').load('dataSearch.php?' + str, hideLoader);
    });
});

这将为所有类名为<li class="clickMe">的元素添加相同的点击处理程序，而不需要为它们中的每一个复制onclick="getPaging(this.value)"代码。

- David Tang

Answer 3

我更喜欢使用HTML5数据API，可以查看这份文档:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
• https://api.jquery.com/data/

一个例子

注：原始回答被翻译为“最初的回答”

$('#some-list li').click(function() {
  var textLoaded = 'Loading element with id='
         + $(this).data('id');
   $('#loading-content').text(textLoaded);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='some-list'>
  <li data-id='1'>One </li>
  <li data-id='2'>Two </li>
  <!-- ... more li -->
  <li data-id='n'>Other</li>
</ul>

<h1 id='loading-content'></h1>

- fitorec

Answer 4

试试这个：

<li onclick="getPaging(this.id)" id="1">1</li>
<li onclick="getPaging(this.id)" id="2">2</li>


function getPaging(str)
{
    $("#loading-content").load("dataSearch.php?"+str, hideLoader);
}

- Hasan Fahim