Question

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

你会发现3个背景图像的新闻和1个没有我的div群集的新闻：

<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 =＆＃34; bg-image＆＃34;捕捉所有集群。改变我的独特类的颜色=＆＃34; body-text-NUMBER＆＃34;相反。

我尝试使用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;');
            }
    };

它以某种方式工作......但是我无法弄清楚如何交换正确的正文字号的文字颜色。

Custom Facts Walkthrough

Answer 1

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

在body_text_2下，没有bg-image存在但您搜索bg-image_2，此DOES存在，但位于body_text_3下。

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

因此，如果没有图像，您仍应添加ID计数器+1，以便它们匹配

JS检查站点的类名和交换文本颜色

1 个答案: