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