Question

请参阅下面的代码。 colorSelectType中的.each无效，我该怎么办？

＆＃13;

$(function() {
    // param

    tabSelectColums();

    //func
    function tabSelectColums() {

     var colum = $('.tablecontact__body tr td:nth-child(3)');


       function colorGetGradient() {
          myPainColor = {
           // defaultColor
           black: '#2c3e50',
           // selectColor
           n2: '#7f8c8d',
           n1: '#f1c40f',
           n3: '#f39c12',
           n4: '#e74c3c',
           n5: '#2ecc71',
           n6: '#3498db',
           gray: '#7f8c8d',
           yellow: '#f1c40f',
           orange: '#f39c12',
           red: '#e74c3c',
           green: '#2ecc71',
           blue: '#3498db'
          };
       }
        colorGetGradient(); // 


       function colorSelectType( minNumber, maxNumber, colorNumber ) {
         if ( $(this).text() <= minNumber && $(this).text() >= maxNumber ) {
          $(this).css('color', colorNumber);
         }
         return $(this).css( 'fontWeight', myPainColor.black );
       }

           

       colum.each(function(index, el) {
        colorSelectType(3, 1, myPainColor.red );
       });



 // for (var i = 0; i < colum.length; i++) {
 //              var q1 = 3;
 //              var q2 = 1;
 //              var q3 = myPainColor.n1;

 //             colorSelectType(q1, q2, q3 );
 // }



              // colorSelectType( 6, 4, myPainColor.red );
              // colorSelectType( 9, 7, myPainColor.red );
              // colorSelectType( 12, 10, myPainColor.red );
              // colorSelectType( 15, 13, myPainColor.red );
              // colorSelectType( 18, 15, myPainColor.red );
              // colorSelectType( 21, 19, myPainColor.red );


    }

});

＆＃13;

.tablecontact__table {
  font-family: Roboto, Helvetica, sans-serif;
  color: #000;
  font-size: 12px;
  margin: 20px 0;
  width: 100%;
}
.tablecontact__header {
 font-size: 16px;
 background: #cceffb;
 text-transform: uppercase;
}
.tablecontact__body {
 font-size: 14px;
 background: #e2f5fc;
}
.tablecontact__th th {
  padding: 6px 12px;
}
.tablecontact__td td {
  padding: 3px 6px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
 <header>
  <!-- <__ partial src="header.html"></partial> -->
 </header>

 <section id="myhero">

  <table class="tablecontact__table">
    <thead class="tablecontact__header">
      <tr class="tablecontact__th">
        <th>text-header</th>
        <th>text-header</th>
        <th>numbers</th>
        <th>text-header</th>
        <th>text-header</th>
    </tr>
  </thead>
  <tbody class="tablecontact__body">
   <tr class="tablecontact__td">
     <td>text01</td>
     <td>text02</td>
     <td>1</td>
     <td>text04</td>
     <td>text05</td>
   </tr>
   <tr class="tablecontact__td">
     <td>text01</td>
     <td>text02</td>
     <td>2</td>
     <td>text04</td>
     <td>text05</td>
   </tr>
   <tr class="tablecontact__td">
     <td>text01</td>
     <td>text02</td>
     <td>10</td>
     <td>text04</td>
     <td>text05</td>
   </tr>
   <tr class="tablecontact__td">
     <td>text01</td>
     <td>text02</td>
     <td>15</td>
     <td>text04</td>
     <td>text05</td>
   </tr>
   <tr class="tablecontact__td">
     <td>text01</td>
     <td>text02</td>
     <td>20</td>
     <td>text04</td>
     <td>text05</td>
   </tr>
  </tbody>
</table>
 </section>

 <section>
  <div class="space500"></div><div class="space500"></div><div class="space500"></div>
 </section>

 <footer>
  <!-- <__ partial src="footer.html"></partial> -->
 </footer>


</body>

＆＃13;

Answer 1

问题

colorSelectType函数的代码可能在column.each循环中，我得出了这个结论，因为你在其中引用了$(this)。

只要您使用该函数包装代码，this关键字开始指向主要的全局Javascript对象（即window），那么您尝试使用{创建一个jQuery列表{1}}对象，它反过来返回一个空的jQuery列表：

解决方案

在window循环中，我们已经引用了每个$ td元素，我们只需要在column.each函数中将此引用作为参数传递，我们在以下解决方案中执行此操作：

colorSelectType

// vars
var column = $('.tablecontact__body tr').find('td:nth-child(3)'),
    myPainColor = {
        red: '#FF0000',
        black: '#000000'
    };

// functions
function colorSelectType($elem, minNumber, maxNumber, colorNumber) {
    /**
     * here, $elem is the reference to the jQuery's object of
     * the current td
     **/
    
    if ($elem.text() >= minNumber && $elem.text() <= maxNumber) {
        $elem.css('color', colorNumber);
    }
}

// init
column.each(function (index, el) {
    /** 
     * we're passing a jQuery's object reference of 
     * the current td as an argument inside 'colorSelectType'
     * function
     **/
     
    colorSelectType($(el), 1, 3, myPainColor.red);
})

如何调试jquery.each在我的代码中不起作用的原因？

1 个答案: