複数ボタンで初回クリックと二回目以降のクリックの動作を変える方法について

Question

いつもお世話になっております。

$("[id^=clickLeft]").click(function(){
    if ($(this).hasClass('first-click') == false) {
        // 初回判定
        // 左ボタン初回用の動作
        $(this).addClass('first-click');
    } else {
　　　　// 二回目以降
       // 左ボタン2回目用の動作
    }

});
$("[id^=clickRight]").click(function(){
    if ($(this).hasClass('first-click') == false) {
        // 初回判定
        // 右ボタン初回用の動作
        $(this).addClass('first-click');
    } else {
　　　　// 二回目以降
       // 右ボタン2回目用の動作
    }
});


<button type="button" id="clickLeft" data-suffix="0">左ボタン</button>
<button type="button" id="clickRight" data-suffix="0">右ボタン</button>

行いたい動作としてはボタンが2つ存在して、初回のクリックと2回目以降のクリックでは行いたい動作を変更したいと考えています。
ただ、左ボタン、右ボタンどちらをクリックしたとしても初回判定として2回目以降の動作にいきたいのですが、
上記のコードですと、左→左だと初回、2回目になりますが左→右だと初回、初回となってしまいます。
左右のどちらのボタンをクリックしたとしても初回判定として2回目以降の動作を行うにはどのようにコードを書けばよいか
ご教授頂ければと思います。

以上、よろしくお願いします。

補足
左ボタンと右ボタンでは行いたい動作が違います。

Answer 1

<div>
  <button～
  <button～
</div>

    if ($(this).parent().hasClass('first-click') == false) {
        // 初回判定
        $(this).parent().addClass('first-click');
    } else {
　　　　// 二回目以降
    }

親要素を用意して、親要素にfirst-clickをつけて判定してみては？

Comments

[test_87097]

頂いたコード通りに作りましたらうまくいきました。ありがとうございました。

Answer 2

たとえばこんな感じで

• CodePen ：修版

Comments

[yambejp]

<script>
$(function(){
$('.btn').on('click',function(){
if($(this).data('click')){
console.log('2回目以降');
}else{
console.log('1回目');
$('.btn').data('click',1);
}
});
});
</script>
<button type="button" class="btn">左ボタン</button>
<button type="button" class="btn">右ボタン</button>

[test_87097]

ご回答ありがとうございます。
すいません、説明不足でした。
左ボタンと右ボタンでの動作は違うので、左ボタンと右ボタンのクラスをまとめるわけにはいかないのです。

[yambejp]

> 左ボタンと右ボタンのクラスをまとめるわけにはいかないのです

クラスはグルーピング用につけただけです
data-suffix="0"を利用してもよいでしょう。
CodePenの修正版はidで判断するバージョンにしてあります

[test_87097]

理解できました。頂いたコード通りに作りましたら希望の動作になりました。ありがとうございます。