使用jQuery顯示一個選項

我想知道如果我點擊一個選項向我顯示框，我如何制作選項...之后點擊另一個選項隱藏第一個并顯示第二個。我盡我所能，但永遠不會隱藏其他人。我需要這個用于衣柜設計......之后我想在每種型別的門部分添加一些背景。

我希望我找到了一些幫助我的人。

謝謝你的建議

$(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>

uj5u.com熱心網友回復：

我希望流動的代碼讓你滿意。

$(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");
  });
});

uj5u.com熱心網友回復：

您可以使用一些技巧來幫助解決此問題。

首先，僅使用一個例程來獲取所有按鈕點擊次數。然后，獲取被點擊按鈕的類（或者，更好的是，ID）并決議出被點擊的按鈕。如果您決定改用類，則需要執行以下操作：

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

接下來，每當單擊按鈕時，只需從所有子門中洗掉顯示類。一個有用的技巧。

此外，使用css 選擇器 Classname-that-starts-with選擇要修改的所需門。這看起來像：[class^=whatever]

最后一個技巧是使用模板文字——一種在字串中嵌入變數的方法。舊的方法是：

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

新方法是：

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

另請注意，我重命名了您的一些類，以便更輕松地僅針對此任務所需的類。

還要注意我是如何修改三種門型別（1_1_、1_2_、1_3_）的 css 選擇器的

顯示代碼片段

$(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>

標籤：查询

上一篇：錨點/影像標簽html上的onClick事件

下一篇：jquery.validate.unobtrusive.js不顯示訊息