Question

我在html中有大约55个链接，所有链接都有相同的链接文本，即＆＃34;购买＆＃34; 。现在在JavaScript中，我想使用以下代码随机化链接的背景颜色。它不起作用。我在页面中引入和不使用jQuery检查了页面。

代码有什么问题？怎么做？

var num;
var arbt = ["yellow", "green", "blue", "magenta", "red", "white", "lime"];

for (num = 0; num < 55; num++) {
    var ran = Math.floor(Math.random * (arbt.length + 1));
    var colo = arbt[ran];

    $(document).ready(function() {
        $("a:nth-child(num)").css("background-color", colo);
    });
}

Answer 1

将文档就绪功能更改为

$(document).ready(function(){
    $("a:nth-child(" + num + ")").css("background-color", colo);
});

基本上num是变量，因此将a:nth-child(num)更改为a:nth-child(" + num + ")

或简单地做到

$(document).ready(function(){
    $("a").each( function(){
        var ran = Math.floor(Math.random * (arbt.length + 1));
        $( this ).css("background-color", arbt[ran] );
    } );
});

Answer 2

jQuery(document).ready(function  () {
  var num;
  var arbt=["yellow","green","blue","magenta","red","white","lime"];
  jQuery("a").each(function (index) { //incase if you want to use index
    var ran = Math.floor(Math.random * (arbt.length + 1));
    var colo = arbt[ran];
    jQuery(this).css('background-color', colo);
  }) 

} )

Answer 3

在这里，你的工作：

<!DOCTYPE html>
<html>
<head>
  <style>
    td {
      padding: 5%;
    }

    .unselected_cell {
      background-color: #EED;
    }

    .selected_cell {
      background-color: green;
    }
  </style>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <table>
    <tr>
      <th>Time</th>
      <th>M</th>
      <th>T</th>
      <th>W</th>
      <th>Tu</th>
      <th>F</th>
      <th>S</th>
      <th>Su</th>
    </tr>
    <tr>
      <td>6-8AM</td>
      <td id=M_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=T_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=W_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Tu_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=F_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=S_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Su_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
    <tr>
      <td>8-10AM</td>
      <td id=M_8-10 class="unselected_cell" onclick="handleCellClick(this);"/>
      <td id=T_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=W_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Tu_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=F_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=S_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Su_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
    </tr>
    <tr>
      <td>10-12PM</td>
      <td id=M_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=T_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=W_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Tu_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=F_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=S_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Su_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
    </tr>
    <tr>
      <td>12-14PM</td>
      <td id=M_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=T_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=W_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Tu_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=F_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=S_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Su_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
    </tr>
    <tr>
      <td>12-14PMM</td>
    </tr>
    <tr>
      <td>14-16PM</td>
    </tr>
    <tr>
      <td>16-18PM</td>
    </tr>
    <tr>
      <td>18-20PM</td>
    </tr>
    <tr>
      <td>20-22PM</td>
    </tr>
    <tr>
      <td>22-00AM</td>
    </tr>
    <tr>
      <td>00-02AM</td>
    </tr>
    <tr>
      <td>02-04AM</td>
    </tr>
    <tr>
      <td>04-06AM</td>
    </tr>
  </table>

    <button onclick="handleButtonClick()">FINISHED</button>

 <script>
   function handleCellClick(cell) {
     if(cell.className.indexOf("unselected_cell") > -1) {
       cell.className = cell.className.replace("unselected_cell", "selected_cell");
     } else {
       cell.className = cell.className.replace("selected_cell", "unselected_cell");
     }
   }

   function handleButtonClick() {
     $(".selected_cell").each(function(index) {
       console.log($(this).prop('id'));
     });
   }
</script>
</body>
</html>

Here's a fork of your codepen

Answer 4

不是将变量连接到选择器，而是可以使用eq()来直接允许变量，也可以从基于零的索引开始

$("a").eq(num).css("background-color", colo);

在javascript中生成第n个子链接的随机背景颜色

4 个答案: