Question

当我将onClick个事件放在button元素内的li元素中，如下所示，以制作AJAX：

<ul>
<li><button value="orange" onClick="qCat(value)">Orange</button></li> 
<li><button value="apple" onClick="qCat(value)">Apple</button></li>
</ul>

效果很好。

但是如果我带走button将事件直接应用于li元素，如下所示make AJAX：

<ul>
<li value="orange" onClick="qCat(value)">Orange</li> 
<li value="apple" onClick="qCat(value)">Apple</li>
</ul>

它无效。我的代码有什么问题吗？请咨询。感谢。

Answer 1

value元素的li属性应该是数字。
此外仅支持订购列表（ol）。

通过将第一个值设置为例如，值甚至可以自动递增。 100，然后其余的将跟随。

如果我测试你的代码，那么函数qCat（）会收到一个与上面一致的0（零）参数。

有关其他信息，请参阅此处：https://www.w3schools.com/tags/att_li_value.asp

Answer 2

你只需要改变传递给你的函数的参数（感谢@epascarello指出这一点）。请参阅下面的代码。

function qCat(val) {
  console.log(val.getAttribute('value'));
}

<ul>
<li value="orange" onClick="qCat(this)">Orange</li> 
<li value="apple" onClick="qCat(this)">Apple</li>
</ul>

Answer 3

值属性设置列表项的值。以下列表项将从该数字开始增加。

值必须是数字，并且只能在有序列表中使用

为了获得预期的结果，请使用数据 - * （HTML全局属性）

qCat = function(elm){
  val = elm.getAttribute('data-value');
  alert(val);
}

<ul>
  <li data-value="orange" onClick="qCat(this)">Orange</li> 
  <li data-value="apple" onClick="qCat(this)">Apple</li>
</ul>

Answer 4

＆＃13;

function First(){
        alert('it is the first option');
    }

    function Second(){
        alert('it is the second option');
    }
     function General(){
        alert('it is a shared option');
    }

＆＃13;

<ul>
    <li><a href="#" onclick=First();>First option</a></li>
    <li><a href="#"onclick=Second();>Second option</a></li>
    <li><a href="#"onclick=General();>Third option</a></li>
    <li><a href="#"onclick=General();>Forth option</a></li>
</ul>

＆＃13;

Answer 5

请查看此更新的代码。

function qCat(event){
debugger;
  console.log($(event.target).attr('value'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li value="orange" onClick="qCat(event)">Orange</li> 
<li value="apple" onClick="qCat(event)">Apple</li>
</ul>

在<li>中放置onClick事件以调用AJAX

5 个答案: