操纵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);
}

演示： 小提琴 -查看控制台日志以查看发生了什么

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/