Question

我想传递点击的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>

请帮我解决这个问题

Answer 1

对于初学者，我不建议使用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>

希望这有帮助！：）

Answer 2

使用this，它会传递对DOM元素本身的引用。

<ul onclick="imageDisplayClick(this)">

Answer 3

你应该考虑使用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);

Answer 4

除了提供的其他答案之外，还会向点击处理程序传递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>

如果没有定义id，如何通过Onclick函数传递Javascript参数

4 个答案: