如何在jQuery中实现类似Doofinder为HTML元素添加visible/hidden属性的效果

Doofinder 添加的 visible/hidden 为互斥的空值属性：元素处于显示状态时仅保留visible属性、移除hidden属性，隐藏状态时反之。和Doofinder完全一致的属性操作实现如下：

基础功能封装 #

// 模拟Doofinder显示元素逻辑
function doofinderShow($element) {
  $element
    .attr('visible', '')
    .removeAttr('hidden')
    .css('display', 'block'); // 若Doofinder不同步修改display属性可删除该行
}

// 模拟Doofinder隐藏元素逻辑
function doofinderHide($element) {
  $element
    .attr('hidden', '')
    .removeAttr('visible')
    .css('display', 'none'); // 若Doofinder不同步修改display属性可删除该行
}

// 切换元素可见状态逻辑
function doofinderToggle($element) {
  $element.is('[visible]') ? doofinderHide($element) : doofinderShow($element);
}

调用示例 #

• 显示Doofinder搜索结果项：
  doofinderShow($('.df-result-item'))
• 隐藏无结果提示组件：
  doofinderHide($('.df-no-results'))

属性效果示例： #

可选：监听Doofinder属性变化 #

如果你需要在Doofinder自身修改属性时触发自定义逻辑，可使用MutationObserver实现：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (['visible', 'hidden'].includes(mutation.attributeName)) {
      const $target = $(mutation.target);
      // 此处写入自定义逻辑
    }
  });
});

// 绑定Doofinder容器，替换为你页面实际的Doofinder容器选择器
observer.observe(document.querySelector('#df-search-container'), {
  attributes: true,
  subtree: true
});

注意事项 #

• 元素选择器尽量限定Doofinder生成的元素（类名多以df-为前缀），避免误修改页面其他原生带hidden属性的元素
• 若你站点的Doofinder属性为visible="true"这类带值格式，修改attr方法的第二个参数为对应值即可

内容的提问来源于stack exchange，提问作者CHRISCOM