web-dev-qa-db-ja.com

onclick event pass <li> idまたはvalue

<li> id or value in 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);
}
jqueryeventsonclickhtml-lists
20
Sasindu H

このようにしてみてください...

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

_<li>_ sにはvalueがありません-フォーム入力のみにあります。実際、_<li>_ sの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">_ sに同じクリックハンドラーが追加され、それぞれのonclick="getPaging(this.value)"コードを複製する必要がなくなります。

11
David Tang

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

これを試して：

<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);
}
1
Hasan Fahim