使用javascript顯示和隱藏同一類的顯示

Question 1

我正在嘗試使用javascript選擇要顯示和隱藏的元素，我無法對html進行更改，下面的javascript show error on“Cannot set property'display'of undefined”。如何顯示和隱藏共享同一類的元素？

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">

Question 2

這增加了一層功能，允許您設置一個文本數組來查找和隱藏圖像。

這個方法依賴于在classnames數組中的h1-with類之后總是有一個類為.hero_discription_container_left的映像。你把它們放在一個數組里，這樣就很容易把它們聯系起來。

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 1

這增加了一層功能，允許您設置一個文本數組來查找和隱藏圖像。

這個方法依賴于在classnames數組中的h1-with類之后總是有一個類為.hero_discription_container_left的映像。你把它們放在一個數組里，這樣就很容易把它們聯系起來。

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">

使用javascript顯示和隱藏同一類的顯示

熱門問答

如果使用DB:：table，如何使用條件

Blazor上的Bootstrap模態已停止工作。NET 8 RC2（使用JSInterop打開/關閉）

強制對象值的形狀，同時將關鍵幀仍視為常量

pandas等于dataframe的所有列名

WPF鼠標懸停在MenuItem上可防止焦點返回窗口

Laravel 8 factories

ActiveMQ 有時候接收不到消息

PHP在條件語句中比較兩個數組

怎么解決java: 無法從靜態上下文中引用非靜態方法 getUserList()

為什么StringBuilder要轉換成String再輸出

pycharm debug模式console不顯示打印的信息

變量或字段聲明無效

使用javascript顯示和隱藏同一類的顯示

熱門問答

如果使用DB:：table，如何使用條件

Blazor上的Bootstrap模態已停止工作。NET 8 RC2（使用JSInterop打開/關閉）

強制對象值的形狀，同時將關鍵幀仍視為常量

pandas等于dataframe的所有列名

WPF鼠標懸停在MenuItem上可防止焦點返回窗口

Laravel 8 factories

ActiveMQ 有時候接收不到消息

PHP在條件語句中比較兩個數組

怎么解決java: 無法從靜態上下文中引用非靜態 方法 getUserList()

為什么StringBuilder要轉換成String再輸出

pycharm debug模式console不顯示打印的信息

變量或字段聲明無效

如果使用DB:：table，如何使用條件

Blazor上的Bootstrap模態已停止工作。NET 8 RC2（使用JSInterop打開/關閉）

怎么解決java: 無法從靜態上下文中引用非靜態方法 getUserList()