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

时间:2018-01-15 21:51:59

标签: javascript

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

请帮我解决这个问题

4 个答案:

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