onclick event pass id or value

问题:

I want to pass <li> id or value in onclick event. here is my exiting code.

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

here is the javascript code

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

回答1:

Try like this...

<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>

or unobtrusively

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

using just

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

回答2:

<li>s don't have a value - only form inputs do. In fact, you're not supposed to even include the value attribute in the HTML for <li>s.

You can rely on .innerHTML instead:

getPaging(this.innerHTML)

Or maybe the id:

getPaging(this.id);

---

However, it's easier (and better practice) to add the click handlers from JavaScript code, and not include them in the HTML. Seeing as you're already using jQuery, this can easily be done by changing your HTML to:

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

And use the following JavaScript:

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

This will add the same click handler to all your <li class="clickMe">s, without requiring you to duplicate your onclick="getPaging(this.value)" code for each of them.

回答3:

Try this:

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

回答4:

I prefer to use the HTML5 data API, check this documentation:

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

A example

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