2

クリックすると色が緑に変わり、次のクリックで黒に戻るように、小さな黒いdivを取得しようとしています。これは続けてほしい。

残念ながら、うまくいかないようで、これに関する他のトピックを確認しても、答えが見つかりませんでした。

私のHTML：

<div id="block"></div>

私のCSS：

   div
    {
        width: 100px;
        height: 100px;
        background-color: black;
    }

私のjQuery：

  $(function(){
    $("#block").click(function(){

        if($(this).hasClass("faded") == false)
        {
            $(this).css("background-color", "green", function(){
            $(this).addClass("faded");
            });
        }
        else
        {
            $(this).css("background-color", "black", function(){
                $(this).removeClass("faded");
            });
        }
    });
    });

基本的に、ブロックに特定のクラスがあるかどうかをチェックさせようとしています。そうでない場合は、追加してcssの背景色を緑に変更します。クラスがある場合 (緑の場合)、それを削除し、css の背景色を黒に戻します。

JSfiddle: http://jsfiddle.net/sVZtL/

よろしくお願いします！

4

3 に答える 3

3

これを試して：

$(document).ready(function(){
 $('#block').on('click', function() {
  $(this).toggleClass('faded');
 });
});

そして、色あせたクラスに background-color: green を入れます。

ただし、jQuery のバージョンによっては動作しない場合があります。

JSFiddle の作業: http://jsfiddle.net/sVZtL/12/

于 2013-06-21T10:47:41.183 に答える
1

このフィドルがお役に立てば幸いです: http://jsfiddle.net/rachit_doshi/sVZtL/8/

$(function(){
$("#block").click(function(){

    if(!$(this).hasClass("greenDiv")) {
        $(this).addClass("greenDiv");
    } else {
        $(this).removeClass("greenDiv");
    }
});
});
于 2013-06-21T10:55:54.590 に答える
1

このフィドルが少し役立つことを願っています: http://jsfiddle.net/vishwa26/VCUvF/

$("div").click(function() {
//var $thisBtn = $(this);
if($("div").hasClass("btn-color")) {
    $("div").removeClass("btn-color");
    $(this).addClass("btn-color");
}
else {  
    $(this).addClass("btn-color");
}
 });
于 2013-10-05T15:11:12.700 に答える