JavaScript 错误 : Uncaught TypeError: $(. ..).onclick 不是函数

Question

我是初学者，我的 JavaScript 出错了。

JavaScript:

$(function(){
    $(".widgetselecterbtn").onclick(function(){
        var index = $(".widgetselecterbtn").index(this);
        $('.itemselected').addClass('hide');
        $('.itemselected').eq(index).removeClass('hide');
    });
});

HTML:

<ul id="wighet">
    <li><div><i class="fa fa-header fa-lg"></i><br><a class="widgetselecterbtn">heading</a></div></li>
    <li><div><i class="fa fa-pencil fa-lg"></i><br><a  class="widgetselecterbtn">text</a></div></li>
    <li><div><i class="fa fa-youtube fa-lg"></i><br><a class="widgetselecterbtn">Youtube</a></div></li>
    <li><div><i class="fa fa-quote-left fa-lg"></i><br><a class="widgetselecterbtn">quate</a></div></li>
    <li><div><i class="fa fa-link fa-lg"></i><br><a class="widgetselecterbtn">link</a></div></li>
    <li><div><i class="fa fa-picture-o fa-lg"></i><br><a class="widgetselecterbtn">image</a></div></li>
    <li><div><i class="fa fa-twitter fa-lg"></i><br><a class="widgetselecterbtn">Twitter</a></div></li>
</ul>
<div class="ItemWidget01 itemselected hide">                 
</div>
<div class="ItemWidget01 itemselected hide">            
</div>
<div class="ItemWidget01 itemselected hide">            
</div>
<div class="ItemWidget01 itemselected hide">                 
</div>
<div class="ItemWidget01 itemselected hide">                
</div>
<div class="ItemWidget01 itemselected hide">                
</div>
<div class="ItemWidget01 itemselected hide">                  
</div>

错误是

Uncaught TypeError: $(...).onclick is not a function

我该如何解决这个问题？

Answer 1

onclick 不是 jQuery 函数。您应该改用 click。

$(".widgetselecterbtn").click(function() {
    //do your task here
});