it-swarm.dev

onclick event pass <li> ID oder Wert

Ich möchte <li> id or value im Ereignis onclick übergeben. Hier ist mein aufregender Code.

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

hier ist der Javascript-Code

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

Versuchen Sie es so ...

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

oder unauffällig

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

nur mit

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

<li>s haben keine value - nur Formulareingaben tun dies. Tatsächlich soll das value-Attribut für <li>s nicht einmal im HTML-Code enthalten sein.

Sie können sich stattdessen auf .innerHTML verlassen:

getPaging(this.innerHTML)

Oder vielleicht die id:

getPaging(this.id);

Es ist jedoch einfacher (und praktischer), die Klick-Handler aus JavaScript-Code hinzuzufügen und nicht in den HTML-Code aufzunehmen. Da Sie jQuery bereits verwenden, können Sie dies ganz einfach tun, indem Sie Ihren HTML-Code in Folgendes ändern:

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

Und benutze folgendes JavaScript:

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

Dadurch wird allen <li class="clickMe">s derselbe Click-Handler hinzugefügt, ohne dass Sie Ihren onclick="getPaging(this.value)"-Code für jeden von ihnen duplizieren müssen.

10
David Tang

Versuche dies:

<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

Ich bevorzuge die HTML5-Daten-API. Überprüfen Sie diese Dokumentation:

Ein beispiel

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

1
fitorec