選択肢が４つあるうちの一つを選択するとそれ以外の選択肢を押せなくする

Question

お疲れ様です。
お手数をおかけいたしますが宜しければご教授いただければと思います。
また、質問文の中で何かありましたら直ぐに返答いたします。

[疑問点]
コマンド['攻撃', '魔法', '道具', 'にげる']の一つを押したときに他のコマンドのイベントを無効にしたいと思っております。
その際、[やってみたこと]でも記載するのですが、特定のボタンを押したときにそれ以外の要素を一つ一つとって来てpointerEventで設定をするということも検討したのですが文が長くなってしまい可読性？が悪くなってしまうので、特定のボタンを押されたときにそれ以外の要素をまとめて設定できる処理がないか教えていただければと思います。

[やってみたこと]
例えば、攻撃を押されたときにそれ以外の要素を一つ一つ取って来てpointerEventで設定するということを検討したのですが文が長くなってしまう

  User.prototype.clickCommand = function( checkCommand ) {
        console.log( checkCommand );
        if ( checkCommand == 1 ) {
            console.log('攻撃!');
           document.querySelector('.magic').style.pointerEvent = 'none';
        } else if ( checkCommand == 2 ) {
            console.log('魔法!');
        } else if ( checkCommand == 3 ) {
            console.log('道具');
        } else if ( checkCommand == 4 ) {
            console.log('逃げる!');
        }
    }

---

<div class="command-container-right">
      <p class="command attack" data-index-id="1">こうげき</p>
      <p class="command magic" data-index-id="2">まほう</p>
      <p class="command tool" data-index-id="3">どうぐ</p>
      <p class="command run" data-index-id="4">にげる</p>
    </div>

  User.prototype.clickCommand = function( checkCommand ) {
        console.log( checkCommand );
    //ここのif文の処理で簡潔にかければと思います。
        if ( checkCommand == 1 ) {
            console.log('攻撃!');
        } else if ( checkCommand == 2 ) {
            console.log('魔法!');
        } else if ( checkCommand == 3 ) {
            console.log('道具');
        } else if ( checkCommand == 4 ) {
            console.log('逃げる!');
        }
    }

TapBattleObj.command.forEach( index => {
        index.addEventListener('click', ()=> {
            if ( index.dataset.indexId == 1 ) {
                let checkCommand = index.dataset.indexId;
                console.log( '攻撃！');
                UserA.clickCommand( checkCommand );
            } else if ( index.dataset.indexId == 2 ) {
                let checkCommand = index.dataset.indexId;
                console.log('　魔法 ');
                UserA.clickCommand( checkCommand );
            } else if ( index.dataset.indexId == 3 ) {
                let checkCommand = index.dataset.indexId;
                console.log( '道具 ');
                UserA.clickCommand( checkCommand );
            } else if ( index.dataset.indexId == 4 ) {
                let checkCommand = index.dataset.indexId;
                console.log( 'にげる');
                UserA.clickCommand( checkCommand );
            }
        },false);
    });

Answer 1

こんにちは

ご質問の主旨としては、似たようなコードを４回書くのを避けたい、ということかなと思われましたので、一例を回答します。

要件を満たすための最小限の属性だけを持つように、HTMLを以下のように修正します。

<div class="command-container-right">
  <p class="command" data-text="攻撃">こうげき</p>
  <p class="command" data-text="魔法">まほう</p>
  <p class="command" data-text="道具">どうぐ</p>
  <p class="command" data-text="逃げる">にげる</p>
</div>

以下のような、クリックハンドラーを作成しておきます。

const commands = [...document.querySelectorAll(".command")];

const handleContainerClick = function({ target }) {
  if (target.classList.contains("command")) {
    console.log(`${target.dataset.text}!`);
    commands.forEach(cmd => {
      if (cmd.textContent !== target.textContent)
        cmd.style.pointerEvents = "none";
    });
  } 
};

上記を div.command-container-right に設定します。

document.querySelector('.command-container-right')
        .addEventListener('click', handleContainerClick, false);

以下は、上記のコードの動作確認用のサンプルです。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/eYpzjeR?editors=1011

たとえば、最初に「どうぐ」をクリックすると、console.log に 道具! と出力され、それ以後、「どうぐ」以外をクリックしても、console.log に何も出力されないことを確認できると思います。

Comments

[skilton]

お返事が遅くなってしまい申し訳ございません。
見たことのない書き方もあり大変勉強になりました！ありがとうございます

[jun68ykt]

どういたしまして????
> 見たことのない書き方もあり大変勉強になりました！
とのことでよかったです????

Answer 2

siblingsを使って、クリックされた要素以外の全兄弟要素が取得できます。

console.logで表示させるテキストもHTML側のdata属性に設定しておけば、
条件分岐の必要もないかなと。

$('.command').on('click', function () {
    console.log($(this).data('consle'));
    $(this).siblings().css('pointer-events','none');
});