操作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/