6

1 つのボタンで 2 つの jquery 関数を実行したいと考えています。最初のクリックで 1 つ、2 回目のクリックでもう 1 つ。2 つのボタンのコードを次に示します。機能を組み合わせる方法はありますか？

<input type="button" value="View Page" onclick="ViewPage()" />

<script type="text/javascript">
function ViewPage() {
example_animate('-=50%');
$("#mainContent").toggle();
}
</script>

<input type="button" value="View Menu" onclick="ViewMenu()" />

<script type="text/javascript">
function ViewMenu() {
example_animate('+=50%');
$("#mainContent").toggle();
}
</script>
4

5 に答える 5

18

このようなものを試してください - DEMO

var action = 1;

$("input").on("click", viewSomething);

function viewSomething() {
    if ( action == 1 ) {
        $("body").css("background", "honeydew");
        action = 2;
    } else {
        $("body").css("background", "beige");
        action = 1;
    }
}

したがって、あなたの場合は次のようになります

function viewSomething() {
    if ( action == 1 ) {
        example_animate('-=50%');
        action = 2;
    } else {
        example_animate('+=50%');
        action = 1;
    }
    $("#mainContent").toggle();
}
于 2012-11-14T21:59:45.857 に答える
1

メソッドを使用する別のone方法では、どちらも一度だけ起動します

$("input").one("click", viewSomething);
function viewSomething()
{
    $("body").css("background", "honeydew");
    $("input").one("click", function(){ // on can be used
        $("body").css("background", "beige");
    });
}

デモ。

更新: 2 番目のハンドラーを存続させたい場合はone、onlike this oneに置き換えます。

于 2012-11-14T22:05:33.277 に答える
0

配列を使用して関数を格納し、カウンターを使用dataしてインデックスを追跡できます。これは、必要な数の関数を追加でき、クリックし続けるとループするため、非常に柔軟性があります。

デモ： http： //jsbin.com/ehatoj/2/edit

var funcs = [
  function one() { alert('one'); },
  function two() { alert('two'); },
  function three() { alert('three'); }
];

$('button')
  .data('counter', 0) // begin counter at zero
  .click(function() {
    var counter = $(this).data('counter');
    funcs[ counter ]();
    $(this).data('counter', counter < funcs.length-1 ? ++counter : 0);
  });
于 2012-11-14T22:06:20.270 に答える
0

ボタンにクラスを追加して、ボタンが何をすべきかを把握し、ボタンにこのクラスがあるかどうかを両方の機能でテストできます。もちろん、viewMenu() のクラスも削除する必要があります。これは、jQuery v1.8.3 では次のようになります。

<input id="toggle-view" type="button" value="View Menu" class="view-page" />

$('#toggle-view').on('click', function() 
{
   var button = $(this);

   if ( button.hasClass('view-page')  ) 
   {
       ViewPage();
       button.removeClass('view-page');   
   } 
   else 
   {
        ViewMenu();
        button.addClass('view-page');
   }
});
于 2012-11-14T22:11:39.887 に答える