操作Dom元素

Question

我想更改元素的類，但是當類更改時，它不會應用我爲它編寫的CSS。任何幫助？該代碼是：

HTML

<div id ='tot'> 
<button type='button' class='cls1' id='id1'></button> 

<button type='button' class='cls2' id='id2'></button> 

<button type='button' class='cls3' id='id3'></button> 

<button type='button' class='cls4' id='id4'></button> 

<button type='button' id='start'>Click Me!</button> 
</div> 

CSS

.cls1{ 
    position: absolute; 
    background-color: red; 
    width: 12%; 
    height: 12%; 
    border: 2px solid black; 

    } 

.cls12{ 
    position: absolute; 
    background-color: #C24641; 
    width: 12%; 
    height: 12%; 
    border: 2px solid black; 

    } 

JQUERY

$(document).ready(function(){ 

     $('#start').click(function(){ 

      game(); 
     }) 

     function game(){ 

      var x = Math.floor((Math.random() * 4) + 1); 
      change1(x); 
     } 

     function change1(y){ 

      var z = 'cls' + y; 
      var t = 'cls' + y + 2; 
      alert(z); 
      alert(t); 
      schimb = document.getElementsByClassName(z); 
      $(schimb).removeClass(z); 
      $(schimb).addClass(t); 

     } 


    }) 

當我改變埃爾從1級到12級，它只是不適用CSS ...

Answer 1

你使用jQuery如此有沒有必要選擇使用getElementsByClassName方法，因爲它不是在所有的瀏覽器中定義的元素：

function change1(y){ 
     var z = 'cls' + y; 
     var t = 'cls' + y + 2; 
     alert(z); 
     alert(t); 
     $("." + z).removeClass(z).addClass(t); 
    } 

Answer 2

您可以使用jQuery來獲取目標元素。 jQuery的不接受元素作爲參數數組，所以$(schimb)不會返回元素

function change1(y) { 
    var z = 'cls' + y; 
    var t = 'cls' + y + 2; 
    $('.'+z).removeClass(z).addClass(t); 
} 

演示：Fiddle - 看看你的控制檯日誌，看看發生了什麼

Answer 3

我做你的代碼的一些變化：

• 你顯然需要對所有按鈕的CSS類，如果你想他們的風格

• 刪除position:absolute;因爲它涵蓋了「開始」按鈕

• 如果你只有cls12你需要常換常到，而不是例如cls32的情況下，第一個是cls3

• 使用選擇的類名可能會導致一些瀏覽器的問題，在純JS通過只使用選擇ID - 它在代碼中被替換的jQuery選擇

看到這個小提琴：http://jsfiddle.net/2c2dx/

$(document).ready(function() { 

    $('#start').click(function() { 

     game(); 
    }) 

    function game() { 

     var x = Math.floor((Math.random() * 4) + 1); 
     change1(x); 
    } 

    function change1(y) { 

     var z = 'cls' + y; 
     var t = 'cls' + y + 2; 
     alert(z); 
     alert(t); 
     schimb = $('.' + z); 
     $(schimb).removeClass(z); 
     $(schimb).addClass('cls12'); 
    } 
}) 

我也想建議如下修改：即使

• 使用分號如果你不必這樣做，這可能會導致問題，如果你稍後再嘗試找到它們，會讓你發瘋。

• 使用有意義的變量;你應該知道它們是什麼只是看着他們通過以下方式

• 優化代碼

HTML：

<button type='button' class='changable' id='changable-1'></button> 
<button type='button' class='changable' id='changable-2'></button> 
<button type='button' class='changable' id='changable-3'></button> 
<button type='button' class='changable' id='changable-4'></button> 
<button type='button' id='start'>Click Me!</button> 

CSS：

.changable { 
    background-color: red; 
    width: 12%; 
    height: 12%; 
    border: 2px solid black; 
} 

.changed { 
    background-color: #0000FF; 
    width: 12%; 
    height: 12%; 
    border: 2px solid black; 
} 

JS：

$(document).ready(function() { 

    $('#start').click(function() { 

     game(); 
    }); 

    function game() { 

     var buttonToChange = $('#changable-' + Math.floor((Math.random() * 4) + 1)); 
     change1(buttonToChange); 
    } 

    function change1(button) { 

     button.removeClass('changable').addClass('changed'); 
    } 
}); 

的jsfiddle：http://jsfiddle.net/Cx5VK/