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()一個真棒線程。