使用javascript显示和隐藏具有相同类的显示

Question

我正在尝试使用 javascript 选择要显示和隐藏的元素，我无法对 html 进行更改，下面的 javascript 显示“无法设置未定义的属性‘显示’”错误。 如何显示和隐藏共享同一类的元素？

var showHideBrandPic = document.querySelectorAll("h1.plp_brand_title");
var pic = document.querySelectorAll('.hero_discription_container_left');


function showHidePic (){
    showHideBrandPic.forEach(showHideBrandPic => {
        if(showHideBrandPic.textContent === "ADIDAS BY PHARRELL WILLIAMS"){
            pic.style.display = "none";
        }else {
            pic.style.display = "block";
        }
    })
   
};

showHidePic();

<h1 class="plp_brand_title">abc</h1>
    <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="600">
<h1 class="plp_brand_title">ADIDAS BY PHARRELL WILLIAMS</h1>
    <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="600">

Answer 1

querySelectorAll以所有元素为目标，然后您需要指定要影响的索引。

示例：使用pic[0].style或pic[1].style而不是pic.style

 var showHideBrandPic = document.querySelectorAll("h1.plp_brand_title"); var pic = document.querySelectorAll('.hero_discription_container_left'); function showHidePic (){ showHideBrandPic.forEach((showHideBrandPic, i) => { if(showHideBrandPic.textContent === "ADIDAS BY PHARRELL WILLIAMS"){ pic[i].style.display = "none"; }else { pic[i].style.display = "block"; } }) } showHidePic();

 <h1 class="plp_brand_title">abc</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="600"> <h1 class="plp_brand_title">ADIDAS BY PHARRELL WILLIAMS</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="600">

如果您希望所有元素都受到影响，要么循环遍历要么使用 JavaScript 的内置映射： Array.map 的概念是什么？

Answer 2

这增加了一层功能，允许您设置一组文本以在之后查找和隐藏图像。

这个方法依赖于总是有一个类为.hero_discription_container_left的图像跟在类名数组中的类的 h1 之后。 您将两者都放在一个数组中，因此很容易将它们关联起来。

 window.addEventListener('load', () => { let removeImagesAfter = ["remove my image too", "remove ME", "ADIDAS BY PHARRELL WILLIAMS"].map(e => e.toLowerCase()); // for sake of comparisons, we convert these to lower case const classNames = ["plp_brand_title", "otherclass", "otherclass2"] let h1s = document.querySelectorAll("h1") let imgs = document.querySelectorAll("img.hero_discription_container_left") h1s.forEach((h1, i) => { if (classNames.filter(c => h1.classList.contains(c)).length === 0) return; imgs[i].style.display = removeImagesAfter.includes(h1.innerText.trim().toLowerCase()) ? 'none' : 'block'; }) })

 <h1 class="otherclass2">remove my image too</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6"> <h1 class="plp_brand_title">abc</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6"> <h1 class="plp_brand_title">ADIDAS BY PHARRELL WILLIAMS</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6"> <h1 class="someotherclass">Not me</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6"> <h1 class="otherclass">remove me</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6">

这是使用element.nextElementSibling的另一种方法，它允许我们一个接一个地遍历元素。

 window.addEventListener('load', () => { let removeImagesAfter = ["ADIDAS BY PHARRELL WILLIAMS"].map(e=>e.toLowerCase()); // for sake of comparisons, we convert these to lower case document.querySelectorAll("h1.plp_brand_title").forEach(h1 => { if (removeImagesAfter.includes(h1.innerText.trim().toLowerCase())) { let sibling = h1.nextElementSibling while (sibling && sibling.tagName !== 'IMG') { sibling = sibling.nextElementSibling } sibling.style.display = "none"; } else { h1.nextElementSibling.style.display = "block"; } }) })

 <h1 class="plp_brand_title">abc</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6"> <h1 class="plp_brand_title">ADIDAS BY PHARRELL WILLIAMS</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6">

Answer 3

以下将扫描您的标记以查找特定标题后的标题和图像，并将结果放入数组els 。 在以标题开头的部分中可以有任意数量（包括 0 个）的图像，前提是图像具有给定的类hero_discription_container_left 。 els然后是一个数组数组。 每个子数组将包含将应用于同一子数组中所有后续<img>元素的style.display值作为第一个值。 在内部forEach()循环中，然后将这些显示值分配给各个<img>元素 ( im )。

 window.addEventListener('load', () => { const brands = ["ADIDAS BY PHARRELL WILLIAMS"]; const els=[]; document.querySelectorAll("h1.plp_brand_title,img.hero_discription_container_left").forEach(el =>{ if (el.tagName==="H1") els.push([brands.includes(el.innerText)?"none":"block"]); else els[els.length-1].push(el); }); els.forEach(([disp,...imgs])=> imgs.forEach(im=>im.style.display=disp) ) })

 <h1 class="plp_brand_title">abc</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6"> <h1 class="plp_brand_title">ADIDAS BY PHARRELL WILLIAMS</h1> <img class="hero_discription_container_left" src="/qw.png" alt="123" width="500" height="6">