Question

此代码无法正常工作。它必须是搜索输入，它将出现在search-btn上的点击事件中。当它出现时（我没有在下面的代码段中显示），提交btn将取前面的地方作为clickbtn来查找smth .. search -btn（显示/隐藏输入的搜索-btn和提交到搜索btn类似，但有2个）将隐藏z-index属性。而且我也试图让事件监听器跟踪event.target不是search-btn（或者提交-btn或输入）的任何点击失败。

js文件的代码是：

document.body.addEventListener('click', function (e){
    if (!$('[name="searchFor"]').hasClass('search-anim') && event.target === $('img')){
        $('[name="searchFor"]').addClass('search-anim');
        searchFor.style.visibility = 'visible';
        searchFor.focus();
        submitBtn.style.display = 'block';
        console.log("Yes");
    }  else {
        console.log(e.target);

    }

html是：

<header>
        <div class="container">
            <div class="header-box">    
                <a href="" class="logo">
                    <img src="./img/logo.png" alt="">
                </a>
                <nav>
                    <div><a href="">Home</a></div>
                    <div><a href="">Portfolio</a></div>
                    <div><a href="">Blog</a></div>
                    <div><a href="">Pages</a></div>
                    <div><a href="">Features</a></div>
                    <div><a href="">Mega Menu</a></div>
                    <div><a href="">Contact</a></div>
                </nav>
                <div class="search">
                    <div class="search-block">
                        <button type="image" name="submitSearchIco" class="clickable"> 
                            <img src="./img/icon-find.png" alt="Search">
                        </button>
                        <button type="submit" name="submitSearch" for="searchFor"> 
                            <img src="./img/icon-find.png" alt="Search">
                        </button>
                        <input type="text" name="searchFor" id="search-inp">
                    </div>
                </div>
            </div>  
        </div>
    </header>

SCSS是：

           .search{
                display: flex;
                align-self: center;
                justify-content: center;
                align-content: center;
                position: relative;
                z-index: 1;
                div{
                    [name="searchFor"]{
                        position: relative;
                        width: auto;
                        align-self: center;
                        outline: none;  
                        border: 1px solid transparent;
                        margin: auto 0;
                        padding: .5rem 3rem .5rem 1.5rem;
                        transition: border 1.5s, border-radius .5s, 
                        visibility 1s linear;
                    }
                    .search-anim{
                        border: 1px solid rgba(0,0,0,.1);
                        border-radius: 1.5rem;
                    }
                    [type="submit"], [type="image"]{
                        outline: none;
                        border: none;
                        background: transparent;
                        margin: auto 10px;
                        padding: 0;
                        position: absolute;
                        right: 5px;
                        top: 3px;
                        bottom: 0;

                    }
                    [type="submit"]{
                        z-index: 5;

                    }
                    [type="image"]{
                        z-index: 3;
                    }
                }
            }

Answer 1

$(document).on("click", function (e){
    console.log(e.target.tagName + " clicked!");
});

$("[name='searchFor']").on("click", function() {
//Do your thang
});

您的代码似乎过于复杂。尝试将其分成小型有用的工作。

首先是上面的分析。其次是你进行显示/隐藏和登录点击输入。

为什么这个JQuery条件不起作用？

1 个答案: