передача события onclick <li>идентификатор или значение

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> s не имеют value - только формы ввода имеют. На самом деле, вы не должны даже включать атрибут value в HTML для <li> s.

Вы можете положиться на .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)" для каждого из них.

Answer 3

Я предпочитаю использовать API данных HTML5, проверьте эту документацию:

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

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