jQuery findClass和addClass

我正在寫一個程序，其中有16個div每個div都有一個獨特的類名，從11,12,13 ... 44.肆虐。現在我寫了一個數學函數來隨機選擇一個數字該數組。我想知道如何用隨機選擇的類名找到div，然後我需要向該div添加一個類。下面jQuery findClass和addClass

代碼，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <style> 
      .row { 
       width:520px; 
       height:120px; 
       border-color:#333; 
       border-width:1px; 
      } 
      .sq-color { 
       margin: 2px; 
       width:120px; 
       height:120px; 
       float:right; 
       background-color:#6C0; 
      } 
      .mole { 
       background-image:url(images.jpg); 
      } 
     </style> 
     <script> 
      var items = Array(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44); 
      var random = items[Math.floor(Math.random() * items.length)] 
     </script> 
     <title>Untitled Document</title> 
    </head> 
    <body> 
     <div class="row"> 
      <div class="sq-color 11"></div> 
      <div class="sq-color 12"></div> 
      <div class="sq-color 13"></div> 
      <div class="sq-color 14"></div> 
     </div> 
     <div class="row"> 
      <div class="sq-color 21"></div> 
      <div class="sq-color 22"></div> 
      <div class="sq-color 23"></div> 
      <div class="sq-color 24"></div> 
     </div> 
     <div class="row"> 
      <div class="sq-color 31"></div> 
      <div class="sq-color 32"></div> 
      <div class="sq-color 33"></div> 
      <div class="sq-color 34"></div> 
     </div> 
     <div class="row"> 
      <div class="sq-color 41"></div> 
      <div class="sq-color 42"></div> 
      <div class="sq-color 43"></div> 
      <div class="sq-color 44"></div> 
     </div> 
    </body> 
</html>

謝謝大家。我嘗試了代碼並插入，但沒有任何更改。沒有DIV似乎顯示在.mole類中給出的背景圖像。

以下是代碼。請讓我知道我在哪裏奉承。我更正了命名約定，並將字母'c'添加到類名稱中。我只是爲了更靈活而使用類。

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style> 
     .row { 
      width:520px; 
      height:120px; 
      border-color:#333; 
      border-width:1px; 
     } 
     .sq-color { 
      margin: 2px; 
      width:120px; 
      height:120px; 
      float:right; 
      background-color:#6C0; 
     } 
     .mole { 
      background-image:url(images.jpg); 
     } 
    </style> 
    <script> 
     var items = Array(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44); 
     var random = items[Math.floor(Math.random() * items.length)] 

     $('.c' + random).addClass('mole'); 
    </script> 
    <title>Untitled Document</title> 
</head> 
<body> 
    <div class="row"> 
     <div class="sq-color c11"></div> 
     <div class="sq-color c12"></div> 
     <div class="sq-color c13"></div> 
     <div class="sq-color c14"></div> 
    </div> 
    <div class="row"> 
     <div class="sq-color c21"></div> 
     <div class="sq-color c22"></div> 
     <div class="sq-color c23"></div> 
     <div class="sq-color c24"></div> 
    </div> 
    <div class="row"> 
     <div class="sq-color c31"></div> 
     <div class="sq-color c32"></div> 
     <div class="sq-color c33"></div> 
     <div class="sq-color c34"></div> 
    </div> 
    <div class="row"> 
     <div class="sq-color c41"></div> 
     <div class="sq-color c42"></div> 
     <div class="sq-color c43"></div> 
     <div class="sq-color c44"></div> 
    </div> 
</body>

來源

2012-11-02 user1345589

在這裏你去：$("." + random).addClass("someClass");

順便說一句，如果這些號碼是唯一的，你可能會更好過使用ID作爲選擇更快。此外，這意味着數字必須是唯一的。注 - 數字ID只與一個HTML5 DOCTYPE有效：<!doctype html>

這選擇是：$("#" + random).addClass("someClass");

來源

2012-11-02 01:22:27 ScottE

可以使用串聯的任何方法，你要這麼久才產生一個jQuery選擇字符串作爲最終的結果是有效的關於jQuery選擇實行

$('.' + random).addClass('someClass')

來源

2012-11-02 01:22:52 charlietfl

$('.'+random).addClass('yourclass');

來源

2012-11-02 01:24:36

讀你的問題，我想你問是TOGLE類來說明什麼選擇隨機數

$(".sq-color " + random).toggleClass("someClass");

來源

2012-11-02 01:28:18

請記住，你不應該只使用一個號碼爲你的類名/ IDS，還看到：What are valid values for the id attribute in HTML?

來源

2012-11-02 01:29:24 Tim

蒂姆 - 這應該留下作爲註釋。另外，html5文檔類型不關心他的。 – ScottE

我不能評論其他答案/問題。 HTML5部分是真實的，但他沒有在他的例子中使用它。而一個更具描述性的名字也是一個不使用數字的好理由 – Tim

jQuery findClass和addClass

回答

相關問題