我想传递点击的li。点击的li号码我必须通过onclick功能。任何li都没有定义id。
示例是单击第二个li,我想传递onclick =“imageDisplayClick(2)但我无法获得计数。
<div id="slider_text">
<ul onclick="imageDisplayClick()">
<li><h1 style="color:orange;">SPORTS & FITNESS</h1></li>
<li><h1>ACCU - CHEK Strips</h1></li>
<li><h1>NATURE'S BOUNTY</h1></li>
<li><h1>Beauty Care</h1></li>
</ul>
</div>
请帮我解决这个问题
答案 0 :(得分:4)
对于初学者,我不建议使用onclick
属性,而是使用Unobtrusive JavaScript并将其分离为函数。
在分离逻辑之后,循环元素只需要一小步,可以使用 .querySelectorAll
获取。
现在,您可以在每个<li>
元素上使用点击处理程序,该处理程序可以使用 this
keyword 引用相关元素。因为您可以直接访问该元素,所以您实际上不应该需要将相关的偏移量传递给相关函数。
var points = document.querySelectorAll('#slider_text > ul > li');
for (var i = 0; i < points.length; i++) {
points[i].addEventListener('click', function() {
console.log(this.innerHTML);
})
}
<div id="slider_text">
<ul>
<li>
<h1 style="color:orange;">SPORTS & FITNESS</h1>
</li>
<li>
<h1>ACCU - CHEK Strips</h1>
</li>
<li>
<h1>NATURE'S BOUNTY</h1>
</li>
<li>
<h1>Beauty Care</h1>
</li>
</ul>
</div>
希望这有帮助! :)
答案 1 :(得分:2)
使用this
,它会传递对DOM元素本身的引用。
<ul onclick="imageDisplayClick(this)">
答案 2 :(得分:0)
你应该考虑使用https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener,因为它会使你的javascript文件中的所有内容都存在,并防止在你的html中散布js片段。
然后,您可以使用event参数详细了解所点击的内容:
在此处测试https://jsfiddle.net/jteLw8qa/
HTML:
<div id="slider_text">
<ul id="selection">
<!-- data-XXX can be accessed in javascript with element.dataset.XXX AS A STRING -->
<li data-yourdata="42"><h1 style="color:orange;">SPORTS & FITNESS</h1></li>
<li data-yourdata="elephant"><h1>ACCU - CHEK Strips</h1></li>
<li data-yourdata="pink"><h1>NATURE'S BOUNTY</h1></li>
<li data-yourdata="stackoverflow"><h1>Beauty Care</h1></li>
</ul>
</div>
JS:
function imageDisplayClick(event)
{
// find the clicked li element
var target = event.target;
// find first parent li or ul
while(target.tagName != 'LI' && target.tagName != 'UL')
target = target.parentNode;// because you have <h1> in your <li>
// if li is a parent the user clicked on it, else he clicked on the side but still on the ul
if(target.tagName == 'LI')
alert('clicked li with data-yourdata=' + target.dataset.yourdata);
}
// have the click event being listened on our ul#selection element
document.getElementById('selection').addEventListener('click', imageDisplayClick);
答案 3 :(得分:0)
除了提供的其他答案之外,还会向点击处理程序传递event参数,该处理程序应该为您提供有关点击了哪些特定内容的信息。
在你的情况下,你可以这样做:
imageDisplayClick = function(event){
var target = event.target.tagName=="H1"?event.target.parentNode:event.target;
console.log(target);
}
<div id="slider_text">
<ul onclick="imageDisplayClick(event)">
<li><h1 style="color:orange;">SPORTS & FITNESS</h1></li>
<li><h1>ACCU - CHEK Strips</h1></li>
<li><h1>NATURE'S BOUNTY</h1></li>
<li><h1>Beauty Care</h1></li>
</ul>
</div>