jQuery - 根据数值更改颜色并逐个遍历每个项目

Question

试图替换django项目中呈现的每个项目的百分比圆的笔触颜色。到目前为止，我只设法将颜色更改为红色。我怀疑这是因为它根据检索到的第一个/最后一个记录（百分比），将它们更改为全部。

有没有一种方法来遍历jQuery中的每个项目，以便每个项目的笔触颜色会改变？

的jQuery：

$(function() { 
     var score = parseInt($("#percentage").text()); 
     if (score <=40) { 
      $("path").css("color", "red") 
     } else if (score >=40) { 
      $("path").css("color", "green") 
     } 
    }); 

HTML：

{% extends "base.html" %} 
{% load bootstrap_tags %} 
{% load staticfiles %} 

{% block head_js %} 
    <script src="{% static "js/percentage.js" %}"></script> 
{% endblock %} 

{% block content %} 
      {% for statistic in statistics %} 
      <div class="stat_img"> 
       <img width="100%" src="/media/{{statistic.image}}"> 
      </div> 
       <span id="percentage">{{statistic.percentage}}</span> 
      <div class="stat_ranking"> 
       <span class="stat_title">{{statistic.title}}&nbsp;({{statistic.year}})</span> 
       <br> 
       <svg viewbox="0 0 36 36" class="circular-chart"> 
        <path class="circle" stroke-dasharray="{{statistic.percentage}}, 100" 
          d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 
          a 15.9155 15.9155 0 0 1 0 -31.831"/> 
         <text x="50%" y="40%" text-anchor="middle" dy=".3em">{{statistic.percentage}}%</text> 
         <text class="blue" x="50%" y="55%" text-anchor="middle" dy=".3em">{{statistic.rating}}</text> 
       </svg> 
      </div> 

      <div class="statistics"> 
        Genre: {{statistic.genre}} <br> 
        Box Office: ${{statistic.box_office}} <br> 
        Budget: ${{statistic.budget}} 
      </div> 
      <hr> 
      {% endfor %} 

{% endblock %} 

Answer 1

您正在使用＃来通过它们的id属性引用元素，其中 在DOM中是唯一的。如果你有多个具有相同ID的元素，jQuery将使用最后一个。当您指定颜色时，也请参阅所有path元素。

如果您有多个百分比领域和路径的元素，你应该把它们编号，当你创建你的DOM（你可以在Django模板使用forloop.counter或forloop.counter0）。每一个的环绕统计连续元素并为其分配一个唯一的ID，并更改循环的ID为“百分比”一类：

{% for statistic in statistics %} 
    <div id="statistic{{ forloop.counter0 }}" class="statistic_row"> 
     <span class="percentage">{{statistic.percentage}}</span> 
     <!-- some code --> 
     <svg> 
      <path class="circle"><!-- some code --></path> 
     <svg> 
    </div> 
{% endfor %} 

那么你也可以做一个循环，你的JS（我指定一个类“百分比”，所以我们有很多的元素来指代）

$(function() { 
    for (var i=0; i<$(".statistic_row").length(); i++) { 
     var $statistic_row = $("#statistic" + i); 
     var score = parseInt($statistic_row.find('.percentage').text()); 
     if (score <= 40) { 
      $statistic_row.find('path').css("color", "red") 
     } else if (score >= 40) { 
      $statistic_row.find('path').css("color", "green") 
     } 
    } 
}); 

编辑：其实，你甚至可以做到这一点没有一个计数器，因为你有SVG路径中的百分比值：

$(function() { 
    // loops through all <path> elements with the class 'circle' 
    $('path.circle').each(function() { 
     // $(this) refers to the current <path> element 
     // gets the text value of the first <text> child element 
     var score = parseInt($(this).siblings('text').first().text()); 
     var color = 'red'; 
     if (score >= 40) { 
      color = 'green'; 
     } 
     // set the color of the current element 
     $(this).css('stroke', color); 
    } 
}); 

这里有一个小提琴：https://jsfiddle.net/hmgodtpa/4/

编辑：你也可以做到这一点，而不JS：

<path class="circle {% if statistic.percentage >= 40 %}good{% else %}bad{% endif %}" stroke-dasharray="{{statistic.percentage}}, 100" 
         d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 
         a 15.9155 15.9155 0 0 1 0 -31.831"/> 

和风格CSS类.good和.bad

Answer 2

这可能是因为你使用的是文字，而不是VAL。

尝试：

$('#button1').click(function() { 
 
     var score = $("#percentage").val(); 
 
     //score = parseInt(score); 
 
     if (score <=40) { 
 
      $("#path").css("color", "red") 
 
     } else if (score >=40) { 
 
      $("#path").css("color", "green") 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="percentage"> 
 
<button type="button" id="button1">Click Me!</button> 
 
<div id="path"> 
 
test 
 
</div>

下面是对difference between text() and val()一个真棒线程。