Show one option with jQuery-CodePudding

i wondered how i make option if i click on one option show me the box... after that click another option hide first one and show me second one. I do my best but evertime not hide others. i need this for wardrobe design... and after that i want to add some background in each type of door section.

i hope i found some who help me.

thanks for your advice

$(document).ready(function() {
  $(".btn-type-1-1").click(function() {
    $(".door_1_1_1").removeClass("hide");
    $(".door_1_1_1").addClass("show");
  });
  $(".btn-type-1-2").click(function() {
    $(".door_1_2_1, .door_1_2_2").removeClass("hide");
    $(".door_1_2_1, .door_1_2_2").addClass("show");
  });
  $(".btn-type-1-3").click(function() {
    $(".door_1_3_1, .door_1_3_2, .door_1_3_3").removeClass("hide");
    $(".door_1_3_1, .door_1_3_2, .door_1_3_3").addClass("show");
  });
});

.type-1,
.type-2,
.type-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-column {
  display: flex;
  flex-direction: row;
}

.show {
  display: flex;
}

.hide {
  display: none;
}

.door_all {
  display: flex;
  flex-direction: row;
}

.door_1_1_1 {
  width: 50px;
  height: 150px;
  border: 4px solid black;
}

.door_1_2_1,
.door_1_2_2 {
  width: 50px;
  height: 75px;
  border: 4px solid black;
}

.door_1_3_1,
.door_1_3_2,
.door_1_3_3 {
  width: 50px;
  height: 50px;
  border: 4px solid black;
}

<div class="door_all">
  <div class="door_1">
    <div class="door_1_1">
      <div class="door_1_1_1 hide"></div>
    </div>
    <div class="door_1_2">
      <div class="door_1_2_1 hide"></div>
      <div class="door_1_2_2 hide"></div>
    </div>
    <div class="door_1_3">
      <div class="door_1_3_1 hide"></div>
      <div class="door_1_3_2 hide"></div>
      <div class="door_1_3_3 hide"></div>
    </div>
  </div>
</div>
<div class="btn-column">
  <div>
    <button class="section-1 section-btn">
  section 1
  </button>
    <div class="type-1">
      <button class="btn-type-1-1">type 1-1</button>
      <button class="btn-type-1-2">type 1-2</button>
      <button class="btn-type-1-3">type 1-3</button>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CodePudding user response：

I wish flowing code satisfies you.

$(document).ready(function() {
  $(".btn-type-1-1").click(function() {
    $(".door_1_1_1 .door_1_2_1, .door_1_2_2 .door_1_3_1, .door_1_3_2, .door_1_3_3").removeClass("hide");
    $(".door_1_1_1").addClass("show");
  });
  $(".btn-type-1-2").click(function() {
    $(".door_1_1_1 .door_1_2_1, .door_1_2_2 .door_1_3_1, .door_1_3_2, .door_1_3_3").removeClass("hide");
    $(".door_1_2_1, .door_1_2_2").addClass("show");
  });
  $(".btn-type-1-3").click(function() {
    $(".door_1_1_1 .door_1_2_1, .door_1_2_2 .door_1_3_1, .door_1_3_2, .door_1_3_3").removeClass("hide");
    $(".door_1_3_1, .door_1_3_2, .door_1_3_3").addClass("show");
  });
});

CodePudding user response：

You can use a few tricks to help with this.

First, use only one routine to get all the button clicks. Then, grab the clicked button's class (or, better yet, ID) and parse-out the button that was clicked. If you decide to use a class instead, you will need to do something like:

const buttClass = $(this).attr('class')[0]

Next, whenever a button is clicked, just remove the show class from ALL sub-doors. A useful trick.

Also, use the css selector Classname-that-starts-with to select the desired doors to modify. This looks like: [class^=whatever]

The final trick is using template literals - a way of embedding a variable within a string. The old way was:

$('.door_'   varName).show()

The new way is:

$(`.door_${varName}`).show();

Also note that I renamed some of your classes to make it easier to target only the ones you want for this task.

Also note how I modified the css selectors for the three door types (1_1_, 1_2_, 1_3_)

Show code snippet

$(document).ready(function() {
  $("button").click(function() {
    $('[class^=door]').removeClass('show');
    const btype = this.id.replace('btn-type-', '').replace('-', '_');
    console.log(btype);
    $(`[class^=door_${btype}]`).addClass('show');
  });
});

.type-1,
.type-2,
.type-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-column {
  display: flex;
  flex-direction: row;
}

.show {
  display: flex !important;
}

[class^='door'] {
  display: none;
}

.door_all {
  display: flex;
  flex-direction: row;
}

[class^=door_1_1_] {
  width: 50px;
  height: 150px;
  border: 4px solid black;
  background: lightblue;
}

[class^=door_1_2_] {
  width: 50px;
  height: 75px;
  border: 4px solid black;
  background: lightpink;
}

[class^=door_1_3_] {
  width: 50px;
  height: 50px;
  border: 4px solid black;
  background:palegreen;
}

<div class="wardrobe">
  <div class="closet_1">
    <div class="closet_1_1">
      <div class="door_1_1_1 hide"></div>
    </div>
    <div class="closet_1_2">
      <div class="door_1_2_1 hide"></div>
      <div class="door_1_2_2 hide"></div>
    </div>
    <div class="closet_1_3">
      <div class="door_1_3_1 hide"></div>
      <div class="door_1_3_2 hide"></div>
      <div class="door_1_3_3 hide"></div>
    </div>
  </div>
</div>
<div class="btn-column">
  <div>
    <button class="section-1 section-btn">
  section 1
  </button>
    <div class="type-1">
      <button id="btn-type-1-1">type 1-1</button>
      <button id="btn-type-1-2">type 1-2</button>
      <button id="btn-type-1-3">type 1-3</button>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>