Блог

Главная - Вопросы по программированию - Как я могу запретить другим функциям вмешиваться в событие click?

Как я могу запретить другим функциям вмешиваться в событие click?

#javascript

#javascript

Вопрос:

Я пытаюсь создать три отдельных фрагмента контента на основе события click. Это работает, однако, если пользователь нажимает более одной кнопки последовательно, оба фрагмента содержимого отображаются одновременно.

Мои знания JS ограничены. Я знаю, что мне могло бы помочь другое условие ‘else’, но когда я добавляю его, вся функция перестает работать.

Я хочу, чтобы одновременно был виден только один параметр содержимого. Есть ли способ, которым я могу добавить дополнительное условие в объявление моей функции, чтобы сделать это? Спасибо за любую помощь.

 .container-top {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.tab {
  border: 2px solid #DCDCDC;
  background-color: #fff;
  padding: 1rem;
  width: 33%;
  text-align: center;
  text-transform: uppercase;
}  
 <div class="container-top">

  <button onclick="productDrop()" class="tab" >
    <span class="tab-title">Product description</span>
  </button>

  <button onclick="financeDrop()" class="tab" id="finance">
    <span class="tab-title">Interest-free finance</span>
  </button>


  <button onclick="deliveryDrop()"class="tab" id="delivery">
    <span class="tab-button">Delivery and returns</span>
  </button>

</div>


<div id="productBody">
Product
</div>

<div id="financeBody">
Finance 
</div>

<div id="deliveryBody">
Delivery 
</div>

<script>
function productDrop() {
  var x = document.getElementById("productBody");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function financeDrop() {
  var x = document.getElementById("financeBody");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function deliveryDrop() {
  var x = document.getElementById("deliveryBody");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

</script>

Комментарии:

1. Что, по-вашему, произойдет вместо этого при нажатии более чем одной кнопки?

2. Есть много способов, которыми вы могли бы реализовать это, но распространенный способ добавить функциональность «переключателя» (то есть вам нужно только что-то одновременно) — это всегда скрывать все при первоначальном нажатии (даже если некоторые элементы уже скрыты), а затем показывать один элемент, который вам действительно нужен.

Ответ №1:

Вы слишком много думаете об этом. Давайте объединим усилия и достигнем той же цели:

 const blah = document.getElementById('displayArea');

blah.innerHTML = 'Product'; // First Default.

drop = (id) => {
  blah.innerHTML = id;
}  
 .container-top {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.tab {
  border: 2px solid #DCDCDC;
  background-color: #fff;
  padding: 1rem;
  width: 33%;
  text-align: center;
  text-transform: uppercase;
}  
 <div class="container-top">

  <button onclick="drop('Product')" class="tab" autofocus>
    <span class="tab-title">Product description</span>
  </button>

  <button onclick="drop('Finance')" class="tab">
    <span class="tab-title">Interest-free finance</span>
  </button>


  <button onclick="drop('Delivery')"class="tab">
    <span class="tab-button">Delivery and returns</span>
  </button>

</div>


<h1 id="displayArea"></h1>