Question

如您所见，我有多个.box div且我的.box div具有data-item-color属性，我需要获得data-item-color值才能更改.box css属性（.line，.tinyline，h6，p），很快：

如果我的data-item-color有red值而不是.line，h6，p为红色.box div < / p>

$(document).ready(function() {

});

h6,
p,
span {
  padding: 0;
  margin: 0;
}

.box {
  width: 200px;
  padding: 20px;
  float: left;
  margin: 10px;
}

.line:before {
  content: "";
  width: 100%;
  height: 5px;
  background: #000;
  display: block;
}

.tinyline:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

Answer 1

看看这个。

我遍历每个div并将其颜色应用于其孩子。

$(document).ready(function() {
  $("div.box").each(function(){
    $(this).find("*").css("color",$(this).data("item-color"));
    $(this).find(".line,.tinyline").css("background-color",$(this).data("item-color"));
  });
});

h6,
p,
span {
  padding: 0;
  margin: 0;
}

.box {
  width: 200px;
  padding: 20px;
  float: left;
  margin: 10px;
}

.line {
  content: "";
  width: 100%;
  height: 5px;
  background: #000;
  display: block;
}

.tinyline {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

Answer 2

试试这个（我也编辑了你的css）：

<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

$(document).ready(function() {
  $('.box').each(function() {
    var color = $(this).attr('data-item-color');
    $(this).children('.line').addClass(color);
    $(this).children('h6').css('color', color);
    $(this).children('p').css('color', color);
    $(this).find('.tinyline').addClass(color);
  });
});

h6,
p,
span {
  padding: 0;
  margin: 0;
}

.box {
  width: 200px;
  padding: 20px;
  float: left;
  margin: 10px;
}

.line:before {
  content: "";
  width: 100%;
  height: 5px;
  background: #000;
  display: block;
}

.line.red:before {
  background: red;
}

.line.blue:before {
  background: blue;
}

.tinyline:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
}

.tinyline.red:after {
  background: red;
}

.tinyline.blue:after {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

修改
我看到了你的评论，所以我编辑了代码。如果你真的需要伪元素你可以为你将要使用的每种颜色创建一个类。然后在jquery中你将覆盖行：before和tinyline：在你之前写的样式之后，通过向元素添加相对类。

Answer 3

告诉我这个答案好吗？

$(document).ready(function() {

window["GETATRR"] = document.getElementsByClassName("box");

 for (var x=0;x < GETATRR.length ;x++) {
    if ( typeof GETATRR[x].getAttribute("data-item-color") != 'undefined'  ) {
     console.log("I AM : " + GETATRR[x].getAttribute("data-item-color"))
    // CHANGE HERE WHAT EVER YOU WANT 
    GETATRR[x].style.color = GETATRR[x].getAttribute("data-item-color")
    }
 } 
});

h6,
p,
span {
  padding: 0;
  margin: 0;
}

.box {
  width: 200px;
  padding: 20px;
  float: left;
  margin: 10px;
}

.line:before {
  content: "";
  width: 100%;
  height: 5px;
  background: #000;
  display: block;
}

.tinyline:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

如何让父母重视

3 个答案: