Question

按下图标时，我遇到图标和弹出窗口的麻烦。这是代码的一部分：

<div class="searchlink" id="searchlink">
   <i class="fa fa-search fa-custom"></i>
   .... 
</div>

$(function() {
    var $searchlink = $('#searchlink');

    $searchlink.on('click', function(e) {
        var target = e ? e.target : window.event.srcElement;
        if ($(target).attr('id') == 'searchlink') {
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
            } else {
                $(this).addClass('open');
            }
        }
    });
});

完整代码：jsfiddle

当我按下图标时它没有显示，它显示我是否按下图标。我应该改变什么？感谢。

Answer 1

您的JS代码存在一些逻辑问题。您的主要问题是使用<canvas id="canvas" width=300 height=300></canvas>来获取引发事件的元素。这是一个问题，因为在事件绑定元素中有很多子元素。要解决此问题，您只需使用e.target关键字来引用引发事件的元素即可。

然后，您可以删除this语句，检查元素的if。这是多余的，因为click事件绑定到id，因此它始终为id。

最后，您可以通过使用jQuery的true方法简化类检查逻辑。试试这个：

toggleClass()

Working example

单击弹出搜索框中的搜索图标

1 个答案: