对span元素执行JavaScript循环，检查它们的值并替换其他节点边框颜色
JavaScript loop on span elements, checking their values and replacing other node border-color
我正在Wordpress CMS上创建一个新网站，这里有一个很大的问题。
我想实现什么？我正在实现一个审查系统，使用PHP，我在我的网站中选择自定义的分类法值，并将其粘贴为圆形图表。一切都很正常，但我想再达到一个效果。我想根据分类法值更改圆的颜色(现在它在span元素中(。
我该如何做到这一点？我尝试了很多不同的JS/JQuery代码，但都没有正常工作(大多数时候，它只选择第一个跨度值，并为所有元素设置颜色，而不是检查所有元素(。
这里有一个代码示例：
HTML:
<div class="c100 p<?php $score = get_the_term_list( $post->ID, 'score' );
$score = strip_tags( $score );
echo $score;
?>">
<span class="rate"><?php $score = get_the_term_list( $post->ID, 'score' );
$score = strip_tags( $score );
echo $score;
?></span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
JS:
var temp = document.getElementsByClassName('c100');
for (i=0;i<=temp.length;i++) {
var rate = document.getElementsByClassName('rate');
if (parseInt(rate[i].innerHTML) < 25 ) {
border = {'border-color':'red'};
$('.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill').css(border);
} else {
border = {'border-color':'green'};
console.log("nie ma tragedii");
};
}
那么我想实现什么呢？1.选择.span类的span元素的数量2.将1步中拾取的数量循环3.检查跨度节点的值4.如果值小于25，则将某个类的边框颜色设置为红色5.如果数值小于50但大于25，则变为黄色6.如果该值小于75但大于25，则更改为蓝色7.如果更高，则将颜色设置为绿色
从一开始就感谢，干杯！
<div class="reviews">
<div class="single-review">
<div class="thumb-bar">
<div class="thumb">
<img id="bg" src="http://localhost/wordpress/wp-content/uploads/2016/08/tbc.jpg">
<div class="thumb-tag">
PC </div>
</div>
<div class="review" id="review" style="background:#3e0201">
<p> score:</p>
<div class="c100 p75">
<span class="rate">75</span>
<div class="slice">
<div class="bar" style="border-color: red;"></div>
<div class="fill" style="border-color: red;"></div>
</div>
</div>
</div>
</div>
<div class="review-note">
<h3>WoW: TBC</h3>
<div class="tag-list">
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/gamepad.png" alt="">
<span class="game-tags"><a href="http://localhost/wordpress/genre/rpg/" rel="tag">RPG</a> </span>
</div>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada e... <a href="http://localhost/wordpress/reviews/wow-tbc/">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> 13 godzin ago</span>
</div>
<div class="comments-stamp">
<span>
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/comments-gray.png" alt="">0 </span>
</div>
</div>
</div>
</div>
<div class="single-review">
<div class="thumb-bar">
<div class="thumb">
<img id="bg" src="http://localhost/wordpress/wp-content/uploads/2016/08/legion.jpg">
<div class="thumb-tag">
PC </div>
</div>
<div class="review" id="review" style="background:green">
<p> score:</p>
<div class="c100 p98">
<span class="rate">98</span>
<div class="slice">
<div class="bar" style="border-color: red;"></div>
<div class="fill" style="border-color: red;"></div>
</div>
</div>
</div>
</div>
<div class="review-note">
<h3>WoW: Legion</h3>
<div class="tag-list">
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/gamepad.png" alt="">
<span class="game-tags"><a href="http://localhost/wordpress/genre/rpg/" rel="tag">RPG</a> </span>
</div>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada e... <a href="http://localhost/wordpress/reviews/test-5/">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> 1 dzień ago </span>
</div>
<div class="comments-stamp">
<span>
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/comments-gray.png" alt="">0 </span>
</div>
</div>
</div>
</div>
<div class="single-review">
<div class="thumb-bar">
<div class="thumb">
<img id="bg" src="http://localhost/wordpress/wp-content/uploads/2016/08/mop.jpg">
<div class="thumb-tag">
PC </div>
</div>
<div class="review" id="review" style="background:black">
<p> score:</p>
<div class="c100 p50">
<span class="rate">50</span>
<div class="slice">
<div class="bar" style="border-color: red;"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
<div class="review-note">
<h3>WoW: MoP</h3>
<div class="tag-list">
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/gamepad.png" alt="">
<span class="game-tags"><a href="http://localhost/wordpress/genre/rpg/" rel="tag">RPG</a> </span>
</div>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada e... <a href="http://localhost/wordpress/reviews/test-4/">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> 1 dzień ago </span>
</div>
<div class="comments-stamp">
<span>
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/comments-gray.png" alt="">0 </span>
</div>
</div>
</div>
</div>
<div class="single-review">
<div class="thumb-bar">
<div class="thumb">
<img id="bg" src="http://localhost/wordpress/wp-content/uploads/2016/08/cata.jpg">
<div class="thumb-tag">
PC </div>
</div>
<div class="review" id="review" style="background:red">
<p> score:</p>
<div class="c100 p5">
<span class="rate">5</span>
<div class="slice">
<div class="bar" style="border-color: red;"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
<div class="review-note">
<h3>WoW: Cata</h3>
<div class="tag-list">
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/gamepad.png" alt="">
<span class="game-tags"><a href="http://localhost/wordpress/genre/rpg/" rel="tag">RPG</a> </span>
</div>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada e... <a href="http://localhost/wordpress/reviews/test-3/">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> 1 dzień ago </span>
</div>
<div class="comments-stamp">
<span>
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/comments-gray.png" alt="">0 </span>
</div>
</div>
</div>
</div>
在您的代码中，for (i=0;i<=temp.length;i++)是错误的，它应该是for (i=0;i<temp.length;i++)，否则它将抛出索引错误。
因为我不知道你的HTML。为了满足您的要求，我使用了4个具有不同值和类的span作为span。我使用$.each函数循环它，并检索它们的text。然后根据您的情况设置它们的边框颜色。
$('.rate').each(function(){
var val=parseInt($(this).text());
$div=$(this).parent().find('.fill');
if(val<=25){
$div.css('border-color','red');
}else if(val>25 && val<=50){
$div.css('border-color','yellow');
}else if(val>50 && val<=75){
$div.css('border-color','blue');
}
else if(val>75){
$div.css('border-color','green');
}
});.fill{
padding:10px;
border-width:2px;
border-style:solid;
background-color:#fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reviews">
<div class="single-review">
<div class="thumb-bar">
<div class="thumb">
<img id="bg" src="http://localhost/wordpress/wp-content/uploads/2016/08/tbc.jpg">
<div class="thumb-tag">
PC </div>
</div>
<div class="review" id="review" style="background:#3e0201">
<p> score:</p>
<div class="c100 p75">
<span class="rate">75</span>
<div class="slice">
<div class="bar" style="border-color: red;"></div>
<div class="fill" style="border-color: red;"></div>
</div>
</div>
</div>
</div>
<div class="review-note">
<h3>WoW: TBC</h3>
<div class="tag-list">
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/gamepad.png" alt="">
<span class="game-tags"><a href="http://localhost/wordpress/genre/rpg/" rel="tag">RPG</a> </span>
</div>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada e... <a href="http://localhost/wordpress/reviews/wow-tbc/">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> 13 godzin ago</span>
</div>
<div class="comments-stamp">
<span>
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/comments-gray.png" alt="">0 </span>
</div>
</div>
</div>
</div>
<div class="single-review">
<div class="thumb-bar">
<div class="thumb">
<img id="bg" src="http://localhost/wordpress/wp-content/uploads/2016/08/legion.jpg">
<div class="thumb-tag">
PC </div>
</div>
<div class="review" id="review" style="background:green">
<p> score:</p>
<div class="c100 p98">
<span class="rate">98</span>
<div class="slice">
<div class="bar" style="border-color: red;"></div>
<div class="fill" style="border-color: red;"></div>
</div>
</div>
</div>
</div>
<div class="review-note">
<h3>WoW: Legion</h3>
<div class="tag-list">
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/gamepad.png" alt="">
<span class="game-tags"><a href="http://localhost/wordpress/genre/rpg/" rel="tag">RPG</a> </span>
</div>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada e... <a href="http://localhost/wordpress/reviews/test-5/">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> 1 dzień ago </span>
</div>
<div class="comments-stamp">
<span>
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/comments-gray.png" alt="">0 </span>
</div>
</div>
</div>
</div>
<div class="single-review">
<div class="thumb-bar">
<div class="thumb">
<img id="bg" src="http://localhost/wordpress/wp-content/uploads/2016/08/mop.jpg">
<div class="thumb-tag">
PC </div>
</div>
<div class="review" id="review" style="background:black">
<p> score:</p>
<div class="c100 p50">
<span class="rate">50</span>
<div class="slice">
<div class="bar" style="border-color: red;"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
<div class="review-note">
<h3>WoW: MoP</h3>
<div class="tag-list">
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/gamepad.png" alt="">
<span class="game-tags"><a href="http://localhost/wordpress/genre/rpg/" rel="tag">RPG</a> </span>
</div>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada e... <a href="http://localhost/wordpress/reviews/test-4/">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> 1 dzień ago </span>
</div>
<div class="comments-stamp">
<span>
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/comments-gray.png" alt="">0 </span>
</div>
</div>
</div>
</div>
<div class="single-review">
<div class="thumb-bar">
<div class="thumb">
<img id="bg" src="http://localhost/wordpress/wp-content/uploads/2016/08/cata.jpg">
<div class="thumb-tag">
PC </div>
</div>
<div class="review" id="review" style="background:red">
<p> score:</p>
<div class="c100 p5">
<span class="rate">5</span>
<div class="slice">
<div class="bar" style="border-color: red;"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
<div class="review-note">
<h3>WoW: Cata</h3>
<div class="tag-list">
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/gamepad.png" alt="">
<span class="game-tags"><a href="http://localhost/wordpress/genre/rpg/" rel="tag">RPG</a> </span>
</div>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada e... <a href="http://localhost/wordpress/reviews/test-3/">Read more <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</p>
<div class="news-info">
<div class="time-stamp">
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i> 1 dzień ago </span>
</div>
<div class="comments-stamp">
<span>
<img src="http://localhost/wordpress/wp-content/themes/blog/library/images/comments-gray.png" alt="">0 </span>
</div>
</div>
</div>
</div>$('.rate').each(function(){
var val=parseInt($(this).text());
$div=$(this).parent().find('.bar');
$divTwo=$(this).parent().find('.fill');
if(val<=25){
$div.css('border-color','red');
$divTwo.css('border-color','red');
}else if(val>25 && val<=50){
$div.css('border-color','yellow');
$divTwo.css('border-color','yellow');
}else if(val>50 && val<=75){
$div.css('border-color','blue');
$divTwo.css('border-color','blue');
}else if(val>75){
$div.css('border-color','green');
$divTwo.css('border-color','green');
}
});
使用了这段代码，现在它按预期工作，真的很感谢您的帮助。现在我明白问题出在哪里了，祝你好运，加油！
相关文章：
- 将href中的图像替换为其他元素中的图像
- 以编程方式将fabric-js-canvas的图像替换为hq图像，并重新计算其他对象的坐标和大小
- 用空格替换单引号和其他符号
- 追加子数据 URI，替换 IE 中的其他对象
- 在HTML文本框中查找某些子字符串，然后用其他字符串替换它们
- 用图像和其他内容替换动态内容
- Javascript:用其他字符替换反斜杠和双引号
- 检查是否在一定时间间隔内加载了多个图像;如果没有，则替换为其他 URL
- CKEDITOR 将 替换为 和其他标签
- 解释$apply和$eval |我可以用其他功能替换它们吗 |AngularJS.
- JavaScript 用具有特定 ID 的正则表达式 img 标记替换，但其他属性可以是任何属性
- 在包含其他标签的标签中，将一个文本替换为另一个文本
- 用字符串替换其他变量的字符串
- 为什么使用替换来取消转义 html 标签也会去除所有其他 html 标签
- 在特定日期将基本图像替换为其他图像.可能
- 使用正则表达式在字符串中查找并替换为其他样式
- 通过jQuery替换数字，而不更改样式中的数字或其他所有内容
- 替换其他两个符号之间的所有符号
- 从属性中获取数据并使用它来替换其他文本
- 对span元素执行JavaScript循环，检查它们的值并替换其他节点边框颜色
