0

дорогие разработчики) Прошу вас помочь, с одним кодом... Не могу разобраться, как правильно решить проблему вывода...

Есть 2 кнопки, они при клике вызывают единое окно, но содержимое окна должно меняться, в зависимости от нажатой кнопки. То-есть при нажатии на Кнопку 1, слева выезжает окно с бирюзовым фоном , в котором есть блок с id "#first" синего цвета. А вот при нажатии Кнопки 2, выезжает то же окно бирюзового цвета, но в нем уже должен быть блок с id "#last" красного цвета. Вроде, мой код работает, но не совсем корректно, так как при нажатии любой кнопки, выезжает окно с бирюзовым фоном, но блок постоянно id "#last" красного цвета.. Код прилагается, надеюсь на вашу помощь)

$(document).ready(function() {

  $("#button-1").click(function() {
    $(".modal").toggleClass("hidden").toggleClass("#first");
  });
  $("#button-2").click(function() {
    $(".modal").toggleClass("hidden").toggleClass("#last");
  });

});
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
  background-color: rgb(224, 224, 224);
  font-family: Arial, Helvetica, sans-serif;
}

header {
  display: flex;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: black;
  transition: all 0.5s ease;
}

button {
  width: 140px;
  height: 30px;
  color: aqua;
  background: blue;
  border: 0;
  border-radius: 5px;
  outline: none;
  margin: 6px;
  cursor: pointer;
}

.modal {
  position: absolute;
  width: 100%;
  height: 100vh;
  margin-top: 50px;
  left: -100%;
  z-index: -1;
  background-color: aqua;
  border-radius: 5px;
  transition: all 0.5s ease;
}

.modal.hidden {
  left: 0%;
}

#first {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;
}

#last {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <button id="button-1">Кнопка 1</button>
  <button id="button-2">Кнопка 2</button>

</header>

<div class="modal">
  <div id="first"></div>
</div>

<div class="modal">
  <div id="last"></div>
</div>

1 ответ 1

1

То-есть при нажатии на Кнопку 1, слева выезжает окно с бирюзовым фоном , в котором есть блок с id "#first" синего цвета. А вот при нажатии Кнопки 2, выезжает то же окно бирюзового цвета, но в нем уже должен быть блок с id "#last" красного цвета.

Предложу такой вариант...

$(document).ready(function() {

  $("#button-1").click(test('first'));
  $("#button-2").click(test('last'));

  //
  function test(id) {
    return function() {
      const o = $(".modal > #" + id).parent()
      let ok = o.hasClass('hidden')
      $(".modal.hidden").removeClass("hidden")
      if (!ok) o.addClass("hidden")
    }
  }
});
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
  background-color: rgb(224, 224, 224);
  font-family: Arial, Helvetica, sans-serif;
}

header {
  display: flex;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: black;
  transition: all 0.5s ease;
}

button {
  width: 140px;
  height: 30px;
  color: aqua;
  background: blue;
  border: 0;
  border-radius: 5px;
  outline: none;
  margin: 6px;
  cursor: pointer;
}

.modal {
  position: absolute;
  width: 100%;
  height: 100vh;
  margin-top: 50px;
  left: -100%;
  z-index: -1;
  background-color: aqua;
  border-radius: 5px;
  transition: all 0.5s ease;
}

.modal.hidden {
  left: 0%;
}

#first {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;
}

#last {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <button id="button-1">Кнопка 1</button>
  <button id="button-2">Кнопка 2</button>

</header>

<div class="modal">
  <div id="first"></div>
</div>

<div class="modal">
  <div id="last"></div>
</div>

Вариант с "типизацией кнопок"...

$(document).ready(function() {

  $(".test").click(function() {
    const id = $(this).data('id')
    const o = $(".modal > #" + id).parent()
    let ok = o.hasClass('hidden')
    $(".modal.hidden").removeClass("hidden")
    if (!ok) o.addClass("hidden")
  })
});
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
  background-color: rgb(224, 224, 224);
  font-family: Arial, Helvetica, sans-serif;
}

header {
  display: flex;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: black;
  transition: all 0.5s ease;
}

button {
  width: 140px;
  height: 30px;
  color: aqua;
  background: blue;
  border: 0;
  border-radius: 5px;
  outline: none;
  margin: 6px;
  cursor: pointer;
}

.modal {
  position: absolute;
  width: 100%;
  height: 100vh;
  margin-top: 50px;
  left: -100%;
  z-index: -1;
  background-color: aqua;
  border-radius: 5px;
  transition: all 0.5s ease;
}

.modal.hidden {
  left: 0%;
}

#first {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;
}

#last {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <button class="test" data-id='first'>Кнопка 1</button>
  <button class="test" data-id='last'>Кнопка 2</button>

</header>

<div class="modal">
  <div id="first"></div>
</div>

<div class="modal">
  <div id="last"></div>
</div>

8
  • это ж он получается максимально универсальный))) Можно просто добавить еще кучу кнопок, с нужными параметрами, и все же будет работать??? 3 фев в 9:48
  • @ArtemCriticallMetr, можно типизировать сами кнопки - тогда вообще одним обработчиком можно обойтись...
    – ksa
    3 фев в 9:51
  • а как это типизировать???? 3 фев в 9:53
  • @ArtemCriticallMetr, я добавил еще вариант...
    – ksa
    3 фев в 9:58
  • ого) Круто... но очень сложно для моих мозгов... учу уже 2 месяца JS и прям совсем туго она мне дается((( 3 фев в 10:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.