I have the below as an example of what I'm working on; I'm trying to add a class to two elements when one of the elements is clicked.

<div id="main">

  <div id="section1">
    - contents here -
  </div>
  <div id="section2">
    - contents here -
  </div>
  <div id="section3">
    - contents here -
  </div>

  <div >

    <div >
      <div >Heading</div>
      <div >
        <div >Gold</div>
      </div>
      <!-- end plans-right -->
    </div>
    <!-- end plans-columns -->

    <div >
      <div >Heading</div>
      <div >
        <div >Silver</div>
      </div>
      <!-- end plans-right -->
    </div>
    <!-- end plans-columns -->

    <div >
      <div >Heading</div>
      <div >
        <div >Bronze</div>
      </div>
      <!-- end plans-right -->
    </div>
    <!-- end plans-columns -->

  </div>
  <!-- end plans-group -->

</div>
<!-- end main -->

#1): DIV with class "select-plan"

When div with class "select-plan" is clicked, add class "clicked" to that div. When it's clicked again, remove the added class.

#2): DIV with id "main"

When "select-plan" is clicked (as explained above) also add class to the container div with id "main". And remove the added class when "select-plan" is clicked again.

This is where I have a problem because different classes have to be added to "main". For example:

1. When "select-gold" is clicked, add class "gold-selected" to "main"
2. When "select-silver" is clicked, add class "silver-selected" to "main"
3. When "select-bronze" is clicked, add class "bronze-selected" to "main"

I don't want previously clicked div to have its added class removed because another div is clicked. The added class should only be removed when that same div is clicked for the second time and so on...

Also, I might have up to 8 or more plans. The solution should not be limited to the 3 plans (Gold, Silver, and Bronze). I should have the ability to create more plans.

I really appreciate everyone's help with this. Thanks in advance.

CodePudding user response：

let selectPlan = document.querySelectorAll('.select-plan');
        let mainDiv = document.getElementById('main');

        selectPlan.forEach(el =>{
            el.addEventListener('click',function(e){
                if(e.target.classList.contains('select-plan')){
                    e.target.classList.toggle('clicked');
                }
                if(e.target.classList.contains('select-gold')){
                    mainDiv.classList.add('gold-selected');
                    mainDiv.classList.remove('silver-selected');
                    mainDiv.classList.remove('bronze-selected');
                }else if(e.target.classList.contains('select-silver')){
                    mainDiv.classList.add('silver-selected');
                    mainDiv.classList.remove('gold-selected');
                    mainDiv.classList.remove('bronze-selected');
                }else{
                    mainDiv.classList.add('bronze-selected');
                    mainDiv.classList.remove('silver-selected');
                    mainDiv.classList.remove('gold-selected');
                }
            });
        });

CodePudding user response：

let main = document.getElementById("main");
let select = document.querySelector(".select-plan");
let selectG = document.getElementsByName("gold");
let selectS = document.getElementsByName("silver");
let selectB = document.getElementsByName("bronze");

function toggleGold() {
    if (main.classList.contains('gold-select')) {
        main.classList.remove('gold-select');
    } else {
        main.classList.add('gold-select');
    }
    selectG[0].classList.toggle('cliqué')
}

function toggleSilver() {
    if (main.classList.contains('silver-select')) {
        main.classList.remove('silver-select');
    } else {
        main.classList.add('silver-select');
    }
    selectS[0].classList.toggle('cliqué')
}

function toggleBronze() {
    if (main.classList.contains('bronze-select')) {
        main.classList.remove('bronze-select');
    } else {
        main.classList.add('bronze-select');
    }
    selectB[0].classList.toggle('cliqué')
}

document.querySelector(".select-gold").addEventListener("click", toggleGold);
document.querySelector(".select-silver").addEventListener("click", toggleSilver);
document.querySelector(".select-bronze").addEventListener("click", toggleBronze)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="main">

    <div id="section1">
        - contents here -
    </div>
    <div id="section2">
        - contents here -
    </div>
    <div id="section3">
        - contents here -
    </div>

    <div >

        <div >
            <div >Heading</div>
            <div >
                <div name="gold" >Gold</div>
            </div><!-- end plans-right -->
        </div><!-- end plans-columns -->

        <div >
            <div >Heading</div>
            <div >
                <div name="silver" >Silver</div>
            </div><!-- end plans-right -->
        </div><!-- end plans-columns -->

        <div >
            <div >Heading</div>
            <div >
                <div name="bronze" >Bronze</div>
            </div><!-- end plans-right -->
        </div><!-- end plans-columns -->

    </div><!-- end plans-group -->

</div><!-- end main -->