jQuery onclick 事件传递 <li> id 或 value
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6276835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick event pass <li> id or value
提问by Sasindu H
I want to pass <li> id or valuein onclickevent. here is my exiting code.
我想传递<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>
here is the javascript code
这是javascript代码
function getPaging(str)
{
$("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
回答by Anish
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>
回答by David Tang
<li>s don't have a value- only form inputs do. In fact, you're not supposed to even include the valueattribute in the HTML for <li>s.
<li>s 没有value- 只有表单输入有。事实上，您甚至不应该value在<li>s的 HTML 中包含该属性。
You can rely on .innerHTMLinstead:
你可以依赖.innerHTML：
getPaging(this.innerHTML)
Or maybe the id:
或者也许是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:
但是，从 JavaScript 代码添加点击处理程序更容易（并且更好地实践），而不是将它们包含在 HTML 中。由于您已经在使用 jQuery，因此可以通过将 HTML 更改为：
<li class="clickMe">1</li>
<li class="clickMe">2</li>
And use the following JavaScript:
并使用以下 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.
这将为您<li class="clickMe">的所有s添加相同的点击处理程序，而无需您onclick="getPaging(this.value)"为每个人复制代码。
回答by fitorec
I prefer to use the HTML5 data API, check this documentation:
我更喜欢使用 HTML5 数据 API，请查看此文档：
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
- https://api.jquery.com/data/
- 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>回答by Hasan Fahim
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);
}
