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/

操纵Dom元素

3 个答案: