时间戳

首页 > 解决方案 > 对一个 onclick 事件使用两个 id

javascript - 对一个 onclick 事件使用两个 id

问题描述

我有一个带有打开/关闭动画的简单搜索栏，但我想将它们都放在一个 header.php 中，一个用于桌面，一个用于移动，因为我有一个移动工具栏，我想在那里显示它。这是我的移动 html 结构：

<div class="mobile-toolbar">
    <div class="search-bar">
        <button class="btn-search-subxxmit" aria-label="Search submit" disabled type="submit"><i class="ti-search icon-search" id="icon-search"></i></button>
        <input type="text" class="search-field" id="search-field" value="" placeholder="Search by keyword">
        <span class="search-clear">╳&lt;/span>
    </div>
</div>

这就是我桌面上的内容：

<div class="header-toolbar">
    <div class="search-bar">
        <button class="btn-search-subxxmit" aria-label="Search submit" disabled type="submit"><i class="ti-search icon-search" id="icon-search"></i></button>
        <input type="text" class="search-field" id="search-field-desktop" value="" placeholder="Search by keyword">
        <span class="search-clear">╳&lt;/span>
    </div>
</div>

这是我的 JavaScript：

var mobTool = document.querySelector ( '.mobile-toolbar');
logo = mobTool.querySelector ( '.logo');
navBtn = mobTool.querySelector ('.mobile-nav-btn');
var bar = document.querySelector( '.search-bar' ),
icon = bar.querySelector( '.icon-search' ),
input = bar.querySelector( 'input' );
clear = bar.querySelector ( '.search-clear');
clear.style.opacity = '0';
icon.addEventListener( 'click' , function(e) {
    e.preventDefault();
    //i can move this in a class
    icon.classList.add( 'clicked' );
    input.style.width = '50rem';
    input.style.padding = '0 35px';
    input.style.border = '1px solid gray';
    input.style.color = 'black';
    input.style.height = '60%';
    logo.style.display = 'none';
    navBtn.style.display = 'none';
    
    // clear.style.opacity = '1';
});
document.getElementById('search-field').addEventListener('input', function(e) {
    if (e.target.value !== '') {
        clear.style.opacity = '1';
        clear.style.display = 'block';
    }
    // else {
    //     clear.style.opacity = '0';
    // }
});
jQuery(document).ready(function ($) {
    $(function(){
        $('.search-clear').click(function(e){
            $('.search-field').val('');
            $('.search-clear').css('opacity','0');
        });
    });
    $(document).mouseup(function(e) {
        var container = $(".search-bar");
        container.removeClass("clicked");
        if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.removeClass("clicked");
            $('.search-field').css('width', '0');
            $('.search-field').css('padding', '0 0');
            $('.search-field').css('border', 'none');
            $('.search-clear').css('opacity','0');
            $('.mobile-toolbar .logo').css('display','inline-block');
            $('.mobile-toolbar .mobile-nav-btn').css('display','block');
        }
    });
});

是否可以对其进行编辑，以便我可以在移动设备和桌面设备上使用相同的功能？我正在使用 document.querySelector，但我不确定是否应该使用 querySelectorAll，我是新手，我不知道该怎么做。请帮忙！谢谢！

标签： javascriptjquery

解决方案

有两种方法可以做到这一点。

  1. 将您的事件侦听器附加到两个元素，使用querySelectorAll()：
[...document.querySelectorAll('.search-input')].forEach(input => {
    input.addEventListener('input', function (e) {
        // your code
    });
});
  1. 利用事件冒泡 - 将事件侦听器添加到任何公共父级（我正在使用<body>下面）并检查触发事件的元素是否实际上是.search-input：
document.body.addEventListener('input', function (e) {
    if (!event.target.classList.contains('search-input')) return;

    // your code
});

第二个有一些优点 - 您可以在输入甚至在 DOM 中之前添加此代码，并且任何新的、动态添加.search-input的也将由它处理。

推荐阅读