使用JS檢查子元素是否包含值

我一直在尋找，但找不到有用的答案。

.event [IF CHILD 'day' CONTAINS 'mon'] {background-color:blue;}
.event [IF CHILD 'day' CONTAINS 'thu'] {background-color:red;}
.event [IF CHILD 'day' CONTAINS 'wed'] {background-color:green;}

<div class="event">
   <div class="day">mon</div>
</div>
<div class="event">
   <div class="day">thu</div>
</div>
<div class="event">
   <div class="day">wed</div>
</div>

這基本上是我想做的。據我所知，這對于純 CSS 是不可能的。

但是 JS 應該是可能的，但我不確定如何..

任何人都知道如何做到這一點？

uj5u.com熱心網友回復：

您需要選擇所有事件querySelectorAll然后forEach檢查textContent每天是否等于您的選擇之一，例如：

const event = document.querySelectorAll('.event');
event.forEach(el => {
  var day = el.querySelector('.day');
  if (day.textContent === 'mon') {
    el.classList.add('blue');
  } else if (day.textContent === 'thu') {
    el.classList.add('red');
  } else if (day.textContent === 'wed') {
    el.classList.add('green');
  }
});

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

<div class="event">
  <div class="day">mon</div>
</div>
<div class="event">
  <div class="day">thu</div>
</div>
<div class="event">
  <div class="day">wed</div>
</div>

參考：

• Document.querySelectorAll()
• Array.prototype.forEach()
• 節點文本內容

uj5u.com熱心網友回復：

如果你想用 實作它pure CSS，你可以使用資料屬性( data-*) 并使用 CSS 定位它們來更改樣式。添加資料屬性很容易，可以對每個跨度進行data-attr="tue"，然后使用 CSS 屬性選擇器來更改/添加樣式，例如.day[data-attr="tue"]{...}

作業代碼如下：

.day[data-attr="mon"] {
  background: red
}
.day[data-attr="tue"] {
  background: green
}
.day[data-attr="wed"] {
  background: yellow
}

<div class="event">
  <div class="day" data-attr="mon">mon</div>
</div>
<div class="event">
  <div class="day" data-attr="tue">tue</div>
</div>
<div class="event">
  <div class="day" data-attr="wed">wed</div>
</div>

uj5u.com熱心網友回復：

如果您只需要使用所有純 javascript 執行此操作，那么這可以幫助您，或者您可以按照其他答案中的建議使用 jquery

let allDivs = document.querySelectorAll("[class^=event]")

for (let i = 0; i < allDivs.length; i  ) {
    let text = allDivs[i].textContent.trim();
    switch (text) {
        case 'mon':
            allDivs[i].style.backgroundColor = "blue";
            break;

        case 'thu':
            allDivs[i].style.backgroundColor = "red";
            break;
        case 'wed':
            allDivs[i].style.backgroundColor = "green";
            break;
    }
}

uj5u.com熱心網友回復：

您可以使用每個 div 的 innerText 創建 css 規則.day，然后您可以.event根據其子 div 的 innerText 將類添加到 div：

const eventDivs = document.querySelectorAll('.event');

for (const e of eventDivs) {
  const child = e.querySelector('.day')
  e.classList.add(`text-${child.innerText}`);
}
  

.text-mon  {background-color:blue;}
.text-thu  {background-color:red;}
.text-wed  {background-color:green;}

<div class="event">
   <div class="day">mon</div>
</div>
<div class="event">
   <div class="day">thu</div>
</div>
<div class="event">
   <div class="day">wed</div>
</div>

使用 Jquery 就更容易了，您可以在線完成：

$('.event').each((_, e) => $(e).addClass(`text-${$(e).find('.day').text()}`));

.text-mon  {background-color:blue;}
.text-thu  {background-color:red;}
.text-wed  {background-color:green;}

<div class="event">
  <div class="day">mon</div>
</div>
<div class="event">
  <div class="day">thu</div>
</div>
<div class="event">
  <div class="day">wed</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

標籤：javascript css

上一篇：為什么在react-transition-group中顯示下拉選單后影片會重置？

下一篇：媒體斷點失敗