3

ボタンをクリックしてjquery animate colorを使用してdivのサイズと色を切り替える簡単なコードがありますが、問題はクリックせずにトグルイベントが発生し、ボタンが消えることです

html :

<input type="button" id="togglemove" value="toggle div1 move" />

<input type="button" id="toggle" value="toggle" /> 

<div class="div1"></div>

jquery:

$(document).ready(function(e) {

$("#toggle").toggle(click1,click2);
$("#togglemove").toggle(move1,move2);
    });

function move1(){
    $(".div1").animate({"left":"200px"},1000);
}

function move2(){
    $(".div1").animate({"left":"100px"},1000);
}
function click1(){
    $("div.div1").animate({"width":"400px","border-radius":"10px",'background-color': '#400101','left':'200px'},1000);
}
function click2(){
    $("div.div1").animate({"width":"200px","border-radius":"0",'background-color': '#000000','left':'100px'},1000);
}

jsfiddle でライブ: http://jsfiddle.net/kaNP4/

4

3 に答える 3

8

この特定のトグルの使用はjQuery 1.9バージョンで削除されたため、トグル機能を自分で実装する必要があります。サンプル実装を以下に示します

見る

$(document).ready(function(e) {

    $("#toggle").click(function(){
        var state = $(this).data('toggleState');
        if(state){
            click2();
        } else {
            click1();
        }
        $(this).data('toggleState', !state);
    });
    $("#togglemove").click(function(){
        var state = $(this).data('toggleState');
        if(state){
            move2();
        } else {
            move1();
        }
        $(this).data('toggleState', !state);
    });
});

デモ:フィドル

于 2013-07-01T07:38:43.100 に答える
1

クリック イベントのリスナーがありません。コードは次のようになります。

$(document).ready(function() {

$("#toggle").click(function(){
   if($(this).attr("class") != "bigger"){
      click1();
      $(this).addClass("bigger");
   } else {
      click2();
      $(this).removeClass("bigger");
   }
});

$("#togglemove").click(function(){
   if($(this).attr("class") != "bigger"){
      move1();
      $(this).addClass("bigger");
   } else {
      move2();
      $(this).removeClass("bigger");
   }
});
});
于 2013-07-01T07:32:19.210 に答える
-1

スクリプトを変更して、このように機能させることができます

HTML:

<input type="button" id="togglemove" value="toggle div1 move" onclick="buttonClicked()" />

<input type="button" id="toggle" value="toggle" onclick="buttonClicked2()"/>

ジャバスクリプト:

function buttonClicked() {
    $("#togglemove").toggle(move1,move2);
}

function buttonClicked2() {
    $("#toggle").toggle(click1,click2);
}

function move1(){
    $(".div1").animate({"left":"200px"},1000);
}

function move2(){
    $(".div1").animate({"left":"100px"},1000);
}

function click1(){
    $("div.div1").animate({"width":"400px","border-radius":"10px",'background-color': '#400101','left':'200px'},1000);
}

function click2(){
    $("div.div1").animate({"width":"200px","border-radius":"0",'background-color': '#000000','left':'100px'},1000);
}
于 2013-07-01T07:37:19.727 に答える