javascript - 选择列表项的前一半和后一半

我正在尝试根据具有定义的开始颜色和结束颜色的渐变来更改列表项的颜色。我正在尝试对列表项的第一和第二半使用两个不同的色标。问题是只有前半部分可以正常工作，并且我收到了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++;
        }
    });

  }
});

最佳答案

问题在于您的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>

关于javascript - 选择列表项的前一半和后一半，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43125605/