bugfix> javascript > 投稿

私はJavaScriptが得意ではありませんが、誰かがこれを手伝ってくれることを願っています。 私が欲しいのは、ボタンの1つを押すと、ボタンがdivにクラスを開くことです。

私は複数のボタンを持っているので、これが意味するのはボタンをクリックすることです、ボタンはcontent1にクラスを開きます、他のボタンの1つを押すと、そのdivのクラスが移動し、ボタンがリンクされた他のdivに割り当てますなどなど。

私が今得ているのは、開いているすべてのdivがクラスにとどまり、削除されなかったということです。グーグルで検索したり、他の技術を使用したりするなど、複数のことを試しましたが、何も機能しません。

const content1 = document.querySelector('.content1');
const content2 = document.querySelector('.content2');
const content3 = document.querySelector('.content3');
var dn = document.querySelector('.dn');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const three = document.querySelector('.three');
one.addEventListener('click', () => {
    if (dn.classList.contains('open')) {
        dn.classList.remove('open');
    } else {
        content1.classList.add('open');
    }
})
two.addEventListener('click', () => {
    if (dn.classList.contains('open')) {
        dn.classList.remove('open');
    } else {
        content2.classList.add('open');
    }
})
three.addEventListener('click', () => {
    if (dn.classList.contains('open')) {
        dn.classList.remove('open');
    } else {
        content3.classList.add('open');
    }
})

.dn {
    display: none;
}
.open {
  display: block;
}

<div id="mainBOX" class="mainBOX">
    <button class="btn one">btn1</button>
    <button class="btn two">btn2</button>
    <button class="btn three">btn3</button>
    <div class="dn content1">
        <h1>Lorem Ipsum</h1>
    </div>
    <div class="dn content2">
        <h1>Lorem Ipsum2</h1>
    </div>
    <div class="dn content3">
        <h1>Lorem Ipsum3</h1>
    </div>
</div>

回答 1 件
  • 現在クリックされているアイテムが開いていることを確認しようとしている場合は、最初に、一致する既存の要素をすべて閉じるようにする必要があります .dn 。あなたのコードは最初のものだけを扱っていました。

    あなたのコードは決して削除していませんでした open いずれかのdivから。

    最後に、コードを大幅に改善する2つのこと:

    イベントの委任:単一のハンドラーのみが必要になるようにします

    データ属性を使用してボタンをdivに関連付ける(他の誰かがインデックスの使用を提案しましたが、ほとんどの人は並列配列から離れようとします)

    document.getElementById('mainBOX').addEventListener('click', (e)=> {
        // Ignore clicks not on buttons
        if (e.target.tagName !== 'BUTTON') {
           return;
        }
        // Close all divs
        Array.from(document.querySelectorAll('.dn')).forEach(
            dn => dn.classList.remove('open')
        );
        // Open the current one
        document.querySelector('.' + e.target.dataset.for).classList.add('open');
    });
    
    
    .dn {
        display: none;
    }
    .open {
      display: block;
    }
    
    
    <div id="mainBOX" class="mainBOX">
        <button data-for="content1" class="btn">btn1</button>
        <button data-for="content2" class="btn">btn2</button>
        <button data-for="content3" class="btn">btn3</button>
        <div class="dn content1">
            <h1>Lorem Ipsum</h1>
        </div>
        <div class="dn content2">
            <h1>Lorem Ipsum2</h1>
        </div>
        <div class="dn content3">
            <h1>Lorem Ipsum3</h1>
        </div>
    </div>
    
    

    $('.btn').click(function() { // get the zero-based index of the clicked element let index = $(this).index(); // hide all divs inside the container and remove the 'open' class $('#mainBOX div').hide().removeClass('open'); // show just the div with the right index and add the 'open' class $('#mainBOX div').eq(index).show().addClass('open'); });

あなたの答え