如图中红色框中的标识,非常影响观感,求大佬如何去掉它们。
相关帖子
-
wilsons •付费者 捐赠者
右侧去掉,参考刚才帖子 请问标签搜索界面如何通过 css 隐藏重复显示? - wilsons 的回帖
左侧不建议去掉,因为这是搜索关键词,当某行只有一个标签内容时,如果把关键词去掉就空白了。
如图,
当然,如果第一种情况关键词标签去掉,第二种不去掉,也挺奇怪的,会导致同样的功能不一致,非常不建议这样做。
- 其他回帖
-
右侧去掉,参考刚才帖子 请问标签搜索界面如何通过 css 隐藏重复显示? - wilsons 的回帖
左侧不建议去掉,因为这是搜索关键词,当某行只有一个标签内容时,如果把关键词去掉就空白了。
如图,
当然,如果第一种情况关键词标签去掉,第二种不去掉,也挺奇怪的,会导致同样的功能不一致,非常不建议这样做。
1 回复1 操作wilsons 在 2024-10-13 21:51:01 更新了该回帖 -
在 请问标签搜索界面如何通过 css 隐藏重复显示? - wilsons 的回帖 的基础上添加了下面的代码
// 左侧去掉搜索关键词标签,仅去掉除了标签关键词,还有其他文本的行 const contextEl = element.querySelector('.b3-list-item__text'); if(contextEl){ const markEl = contextEl.querySelector('mark'); if(markEl && markEl.textContent.indexOf('#') !== -1){ // 使用正则表达式匹配并移除零宽度空格 const contextText = contextEl.textContent.replace(/^\u200B+|\u200B+$/g, ''); const markText = markEl.textContent.replace(/^\u200B+|\u200B+$/g, ''); const onlyMark = contextText.replace(new RegExp(`${markText}`, 'g'), '').replace(/^\u200B+|\u200B+$/g, '').trim(); if(contextText !== markText && onlyMark){ contextEl.querySelectorAll('mark').forEach(item => { item.style.display = 'none'; }); } } }
完整代码如下
(()=>{ // 监听搜索项出现 observeElementExist('div[data-type="search-item"]', (element) => { // 左侧去掉搜索关键词标签,仅去掉除了标签关键词,还有其他文本的行 const contextEl = element.querySelector('.b3-list-item__text'); if(contextEl){ const markEl = contextEl.querySelector('mark'); if(markEl && markEl.textContent.indexOf('#') !== -1){ // 使用正则表达式匹配并移除零宽度空格 const contextText = contextEl.textContent.replace(/^\u200B+|\u200B+$/g, ''); const markText = markEl.textContent.replace(/^\u200B+|\u200B+$/g, ''); const onlyMark = contextText.replace(new RegExp(`${markText}`, 'g'), '').replace(/^\u200B+|\u200B+$/g, '').trim(); if(contextText !== markText && onlyMark){ contextEl.querySelectorAll('mark').forEach(item => { item.style.display = 'none'; }); } } } // 右侧去掉重复 const ariaLabel = element.querySelector('.b3-list-item__meta:last-child'); if(!ariaLabel) return; const itemText = element.querySelector('.b3-list-item__text')?.textContent || ''; if(!itemText) return; const paths = ariaLabel?.textContent?.split('/'); if(!paths) return; const lastPath = paths?.pop(); if(!lastPath) return; if(itemText !== lastPath) return; ariaLabel.textContent = paths.join('/'); }); // 监听元素出现 function observeElementExist(selector, callback) { const handleMutations = (mutationsList, observer) => { for (let mutation of mutationsList) { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.matches && node.matches(selector)) { callback(node); //observer.disconnect(); // 一旦找到元素,停止监听 } }); } } }; // 创建一个MutationObserver实例 const config = { attributes: false, childList: true, subtree: true }; const observer = new MutationObserver(handleMutations); // 选择需要监听的父节点 const targetNode = document.body; // 或者选择其他合适的父节点 // 开始监听目标节点的变化 observer.observe(targetNode, config); } })();
1 回复1 操作wilsons 在 2024-10-13 22:59:59 更新了该回帖