Question

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

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

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>

Answer 2

<li>没有value - 只有表单输入。实际上，您甚至不应在value的HTML中包含<li>属性。

您可以依赖.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)"复制{{1}}代码。

Answer 3

我更喜欢使用HTML5数据API，请查看以下文档：

一个例子

$('#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>

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

onclick事件传递<li> id或value </li>

4 个答案:

一个例子