divのonclickで遷移を開始する方法は？

Question

私はウィジェットを開発しています。これは、jQueryのaddClassメソッドとremoveClassメソッドを使用していますが、どういう機能が働いていないのか分かりません。ここで

はコードです：私がdiv要素をクリックしたとき

$('#test').click(function() { 
 
    $(this).addClass('second'); 
 
    console.log("hello"); 
 
}, function() { 
 
    $(this).removeClass('second'); 
 
});

#test { 
 
    transition: all 0.5s ease; 
 
    } 
 
    .first { 
 
    width: 150px; 
 
    height: 30px; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 25px; 
 
    } 
 
    #prop { 
 
    width: 150px; 
 
    height: 30px; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 25px; 
 
    background-color: #abc322; 
 
    color: white; 
 
    text-align: center; 
 
    } 
 
    .second { 
 
    width: 150px; 
 
    height: 300px; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 25px; 
 
    box-shadow: 3px 4px 40px grey; 
 
    }

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<div id="test" class="first"> 
 
    <div id="prop"> 
 
    freight Calculator 
 
    </div> 
 
    <p> 
 
    welcome to freight calculator 
 
    </p> 
 
</div>

は、そのクラスを変更し、移行を開始する必要がありますが、それは動作しません。私がした間違いを特定してください。

ありがとうございます。

Answer 1

jQueryの.click()は、イベントリスナーとしての機能を取ります。代わりに.toggleClass()を使用できます。

$('#prop').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#test').toggleClass('second'); 
 
});

#test { 
 
    transition : all 0.5s ease; 
 
} 
 
.first { 
 
    width: 150px; 
 
    height: 30px; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 25px; 
 
} 
 
#prop { 
 
    cursor: pointer; 
 
    width: 150px; 
 
    height: 30px; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 25px; 
 
    background-color: #abc322; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
.second { 
 
    width: 150px; 
 
    height: 300px; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 25px; 
 
    box-shadow: 3px 4px 40px grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="test" class="first"> 
 
    <div id="prop"> 
 
    freight Calculator 
 
    </div> 
 
    <p> 
 
    welcome to freight calculator 
 
    </p> 
 
</div>

Answer 2

clickメソッドは、コール時に発生する1つのコールバック関数しか使用しません。あなたは2つのコールバックを提供しました（クラスを追加するコールバックとそれを削除するコールバック）。 jQueryはその処理を知らず、最初のコールバックがeventDataオブジェクトであると仮定し、2番目の関数をクリック時に実行するアクションとして扱います。これは、クリックするとクラスを削除することだけです。

click()メソッドの使用方法の詳細については、https://api.jquery.com/click/を参照してください。あなたが唯一のコールバックを提供する場合

は、それが正常に動作します：あなたは.toggleClass()代わりの.addClass()と.removeClass()を使用する必要がありますのでhttps://jsfiddle.net/uqmupq3h/は

Answer 3

.click()方法は一つだけコールバック関数をとります。

$('#test').click(function(){ 
    $(this).toggleClass('second'); 
}) 

https://jsfiddle.net/knj0ec6n/