选择列表项的前半部分和后半部分

Question

我正在尝试根据具有定义的起始颜色和结束颜色的渐变更改列表项的颜色。我正在尝试为列表项的第一部分和下半部分使用两个不同的色标。问题是只有前半部分在工作，我收到一个JS错误

https://jsfiddle.net/qrzms3s9/1/

jQuery(document).ready(function($) {
  if($('.test')[0]){
    var circles = $('.testcircle').length,
            halfcircles = circles / 2;  
    function colorStrToIntArray(color) {
        if (color.length == 4 || color.length == 7) {
                color = color.substr(1);
        }
        if (color.length == 3) {
            var r = parseInt(color.substr(0, 1) + color.substr(0, 1), 16),
                    g = parseInt(color.substr(1, 1) + color.substr(1, 1), 16),
                    b = parseInt(color.substr(2, 1) + color.substr(2, 1), 16);
            return [r, g, b];
        } 
        else if (color.length == 6) {
            return [
                parseInt(color.substr(0, 2), 16), 
                parseInt(color.substr(2, 2), 16), 
                parseInt(color.substr(4, 2), 16)
            ];
        }
        return false;
    }
    function calculateSteps(color1, color2, steps) {
        var output = [],
                start = colorStrToIntArray(color1),
                end = colorStrToIntArray(color2);
        var calculate = function(start, end, step) {
            return start + Math.round((end - start) * (step / (steps / 2)));
        };
        for ( var i = 0; i < steps; i++ ) {
            var color = [0, 0, 0];
            color[0] = calculate(start[0], end[0], i);
            color[1] = calculate(start[1], end[1], i);
            color[2] = calculate(start[2], end[2], i);
            output.push(color);
        }
        return output;
    }
    var colors = calculateSteps("#f29111", "#e60000", halfcircles),
            colors2 = calculateSteps("#d20911", "#22637e", halfcircles),
            cars = $('.testcircle');
            index = 0;
    $('.testcircle').each(function() {
        var $carrot = $("<div>", {"class": "testw6"});
        $(this).closest('li').find('.testw5').prepend($carrot);
        if (index < halfcircles) { 
            $(this).css('background-color', 'rgb(' + colors[index][0] + ', ' + colors[index][1] + ', ' + colors[index][2] + ')');
            $(this).closest('li').find('.testw5').css('background-color', 'rgb(' + colors[index][0] + ', ' + colors[index][1] + ', ' + colors[index][2] + ')');
            $(this).closest('li').find('.testw6').css('background-color', 'rgb(' + colors[index][0] + ', ' + colors[index][1] + ', ' + colors[index][2] + ')');
            index++;
        }
        else {
            $(this).css('background-color', 'rgb(' + colors2[index][0] + ', ' + colors2[index][1] + ', ' + colors2[index][2] + ')');
            $(this).closest('li').find('.testw5').css('background-color', 'rgb(' + colors2[index][0] + ', ' + colors2[index][1] + ', ' + colors2[index][2] + ')');
            $(this).closest('li').find('.testw6').css('background-color', 'rgb(' + colors2[index][0] + ', ' + colors2[index][1] + ', ' + colors2[index][2] + ')');
            index++;
        }
    });
  }
});

Answer 1

问题在于您的index计数。对于迭代的后半部分，您需要重置index。我有一个更好的代码方法 - 我们可以有一个colors数组并从 each 指向

元素索引，而不是重置索引。

jQuery(document).ready(function($) {
  var circles = $('.testcircle').length,
    halfcircles = circles / 2;
  function colorStrToIntArray(color) {
    if (color.length == 4 || color.length == 7) {
      color = color.substr(1);
    }
    if (color.length == 3) {
      var r = parseInt(color.substr(0, 1) + color.substr(0, 1), 16),
        g = parseInt(color.substr(1, 1) + color.substr(1, 1), 16),
        b = parseInt(color.substr(2, 1) + color.substr(2, 1), 16);
      return [r, g, b];
    } else if (color.length == 6) {
      return [
        parseInt(color.substr(0, 2), 16),
        parseInt(color.substr(2, 2), 16),
        parseInt(color.substr(4, 2), 16)
      ];
    }
    return false;
  }
  function calculateSteps(color1, color2, steps) {
    var output = [],
      start = colorStrToIntArray(color1),
      end = colorStrToIntArray(color2);
    var calculate = function(start, end, step) {
      return start + Math.round((end - start) * (step / (steps / 2)));
    };
    for (var i = 0; i < steps; i++) {
      var color = [0, 0, 0];
      color[0] = calculate(start[0], end[0], i);
      color[1] = calculate(start[1], end[1], i);
      color[2] = calculate(start[2], end[2], i);
      output.push(color);
    }
    return output;
  }
  var colors = calculateSteps("#f29111", "#e60000", halfcircles),
    cars = $('.testcircle');
  colors = colors.concat(calculateSteps("#d20911", "#22637e", halfcircles));
  $('.testcircle').each(function(i) {
    var $carrot = $("<div>", {
      "class": "testw6"
    });
    var rgb = 'rgb(' + colors[i][0] + ', ' + colors[i][1] + ', ' + colors[i][2] + ')';
    $(this).closest('li').find('.testw5').prepend($carrot);
    $(this).css('background-color', rgb);
    $(this).closest('li').find('.testw5').css('background-color', rgb);
    $(this).closest('li').find('.testw6').css('background-color', rgb);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testw3">
  <ul class="testw4">
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
    <li>
      <a href="placeholder.html">
        <span class="testcircle"><span class="testnumber">10</span></span>
        <div class="testtext">Title</div>
        <div class="testw5">
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="placeholder.html">Lorem Ipsum Link</a>
        </div>
      </a>
    </li>
  </ul>
</div>