javascript - JS 检查站点的类名并交换文本颜色

Question

尝试检查我的类模板并交换文本的颜色。这是一个视差模板，其中包含带背景图像+文本和不带+文本的幻灯片。如果没有背景图片，将文本颜色换成黑色。如果有背景图片，将文本颜色换成白色。

你会在我的 div 集群中找到 3 个带有背景图像的新闻和 1 个没有背景图像的新闻:

<div class="views-row views-row-1 abschnitt" id="abschnitt-0">
  <div class="section views-fieldset" data-module="views_fieldsets" style="margin-top: 194.5px;">
    <div>
      <h1> <a href="/drupal/node/4">Headline 1</a> </h1>
    </div>
    <div>
      <div class="body_text" id="body_text-0">
        <p> Newstext </p>
      </div>
    </div>
  </div>
  <div class="bg-holder views-fieldset" data-module="views_fieldsets" id="bg-holder-0">
    <div>
      <div>
        <div class="bg-holder bg-image" style="background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://localhost/drupal/sites/default/files/styles/large/public/field/image/wallhaven-157066.jpg?itok=2BHBQSVa);" id="bg-image-0"> &nbsp; </div>
      </div>
    </div>
  </div>
</div>
<div class="views-row views-row-2 abschnitt" id="abschnitt-1">
  <div class="section views-fieldset" data-module="views_fieldsets" style="margin-top: 194.5px;">
    <div>
      <h1> <a href="/drupal/node/3">Headline 2</a> </h1>
    </div>
    <div>
      <div class="body_text" id="body_text-1">
        <p>Newstext 2</p>
      </div>
    </div>
  </div>
  <div class="bg-holder views-fieldset" data-module="views_fieldsets" id="bg-holder-2">
    <div>
      <div>
        <div class="bg-holder bg-image" style="background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://localhost/drupal/sites/default/files/styles/large/public/field/image/wallhaven-163460.jpg?itok=VnecbBnE);" id="bg-image-1"> &nbsp; </div>
      </div>
    </div>
  </div>
</div>
<div class="views-row views-row-3 abschnitt" id="abschnitt-2">
  <div class="section views-fieldset" data-module="views_fieldsets" style="margin-top: 194.5px;">
    <div>
      <h1> <a href="/drupal/node/2">Headline 3</a></h1>
    </div>
    <div>
      <div class="body_text" id="body_text-2">
        <p>Newstext 3</p>
      </div>
    </div>
  </div>
  <div class="bg-holder views-fieldset" data-module="views_fieldsets" id="bg-holder-4">
    <div>
      <div> </div>
    </div>
  </div>
</div>
<div class="views-row views-row-4 abschnitt" id="abschnitt-3">
  <div class="section views-fieldset" data-module="views_fieldsets" style="margin-top: 194.5px;">
    <div>
      <h1><a href="/drupal/node/1">Headline 4</a></h1>
    </div>
    <div>
      <div class="body_text" id="body_text-3">
        <p>Newstext 4</p>
      </div>
    </div>
  </div>
  <div class="bg-holder views-fieldset" data-module="views_fieldsets" id="bg-holder-5">
    <div>
      <div>
        <div class="bg-holder bg-image" style="background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://localhost/drupal/sites/default/files/styles/large/public/field/image/wallhaven-18326.jpg?itok=M7ZCMtbM);" id="bg-image-2"> &nbsp; </div>
      </div>
    </div>
  </div>
</div>

现在我试图捕获所有带有 class="bg-image"的集群，以反向更改我唯一的 class="body-text-NUMBER"的颜色。

我对 JS 的尝试:

 var bt_elems = document.getElementsByClassName("body_text");
    for (var i = 0, n = bt_elems.length; i<n; ++i){
        document.getElementsByClassName('body_text')[i].setAttribute('id', 'body_text-'+[i]);

        var el = document.getElementById('bg-image-'+[i]);
            if (el){
                console.log(document.getElementById('bg-image-'+[i]));
                console.log(document.getElementsByClassName('body_text')[i]);
                document.getElementsByClassName('body_text')[i].setAttribute('style', 'color: white;');
                console.log("#######");
            }else{
                document.getElementsByClassName('body_text')[i].setAttribute('style', 'color: black;');
            }
    };

它以某种方式工作...但我不知道如何交换 RIGHT body-text-NUMBER 的文本颜色。

https://jsfiddle.net/ex43q7f7/6/

Answer 1

body_text id 的计数器与您的 bg-image id 的计数器不匹配

在 body_text_2 下没有 bg-image 但您搜索 bg-image_2，它确实存在但位于 body_text_3 下。

jsfiddle.net/ex43q7f7/7 这里的 body_text id 号与 bg-image id 号匹配，然后它就可以工作了。

所以，如果没有图像，你仍然应该添加 id 计数器 +1，以便它们匹配