Выполните действие над <div> в зависимости от класса

Question

Я хотел бы переключать класс элемента при щелчке, но похоже, что jQuery видит только, с какого класса элемент начал, а не читает при изменении.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".red").click(function(){
        $(this).addClass("green");
        $(this).removeClass("red");
    });

    $(".green").click(function(){
        $(this).addClass("red");
        $(this).removeClass("green");
    });
});
</script>
<style>
.green {
    color: green;
}
.red {
    color: red;
}
</style>
</head>
<body>

<p class="green">I should toggle red/green</p>

</body>
</html>

Как правильно переключать класс элемента при каждом нажатии?

javascript jquery html css

0

Brady Dowling 16 Дек 2015 в 21:38

Answer 1

Вам нужно использовать toggleClass()

$(document).ready(function(){
    $(".red, .green").on('click',function(){
        $(this).toggleClass("green red");
    });
});

6

Ankanna 16 Дек 2015 в 19:13

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document.body).ready(function(){
    $(document.body).on('click',"button",function(){$(this).toggleClass("red green");})
});
</script>
<style>
.red {
    font-size: 120%;
    background: red;
}
.green{
background:green;
}
</style>
</head>
<body>
<button class = "green">Toggle class "green" for p elements</button>

</body>
</html>

0

Ankanna 16 Дек 2015 в 19:09

Answer 3

Вам нужно использовать .on, так как вы изменяете классы динамически.

$(document).ready(function(){
    $(document).on("click", ".red", function(){
        $(this).addClass("green");
        $(this).removeClass("red");
    });

    $(document).on("click", ".green", function(){
        $(this).addClass("red");
        $(this).removeClass("green");
    });
});

1

void 16 Дек 2015 в 18:39

Выполните действие над <div> в зависимости от класса

3 ответа

Похожие вопросы

Новые вопросы

javascript