Как включить или отключить нажатие кнопки с помощью Javascript - PullRequest
Новая
       12

Как включить или отключить нажатие кнопки с помощью Javascript

1 голос
/ 10 апреля 2019

У меня есть таблица (3x2) из ​​шести кнопок.Когда я нажимаю кнопку, под нажатой кнопкой появляется окно с текстом.Окно (или div) отображается, пока я не нажму ту же кнопку еще раз.Даже если я нажму другую кнопку, то под этой кнопкой появится другое окно.

Мой вопрос: есть ли способ заставить его работать как «переключение» между кнопками.Это означает, что если я нажимаю кнопку, появляется окно (div), а если я нажимаю другую кнопку, более раннее окно (div) исчезает и появляется новое? 

<button onclick="myFunction(1)">Button1</button>
<div id="myDIV1" style="display:none">
"the window with text to be shown"
</div>

<button onclick="myFunction(2)">Button2</button>
<div id="myDIV2" style="display:none">
"the window with text to be shown"
</div>

<script>
function myFunction(num) {
    var str1= "myDIV"
    var str2 = num.toString();
    var result = str1 + str2
    var x = document.getElementById(result);
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
</script>

Ответы [ 4 ]

0 голосов
/ 10 апреля 2019

Если вам приходится иметь дело с большим количеством элементов для переключения, возможное и эффективное решение - сохранить ранее переключенный элемент html ref и скрыть его, если пользователь нажмет другую кнопку. 

var previouslyToggled

function myFunction(num) {
  var result = "myDIV" + num.toString();
  var x = document.getElementById(result);
  
  if (previouslyToggled && previouslyToggled !== x) {
    previouslyToggled.style.display = 'none'; 
  }
  
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
  
  // Store element ref
  previouslyToggled = x
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button onclick="myFunction(1)">Button1</button>
  <div id="myDIV1" style="display:none">
  "the window with text to be shown for btn 1"
  </div>
  <button onclick="myFunction(2)">Button2</button>
  <div id="myDIV2" style="display:none">
  "the window with text to be shown for btn 2"
  </div>
</body>
</html>
0 голосов
/ 10 апреля 2019

Основываясь на структуре HTML, вы можете выбрать следующий элемент div нажатой кнопки с помощью nextElementSibling: 

function myFunction(btn) {
  document.querySelectorAll('button + div').forEach(function(d){
    d.style.display = 'none'; // hide all
  });
  btn.nextElementSibling.style.display = 'block'; // show div only next to the button clicked
}
button{
  display: block;
  margin: 10px;
}
button+div{
  display:none; 
}
<button type="button" onclick="myFunction(this)">Button1</button>
<div id="myDIV1">
"the window with text to be shown"
</div>
<div id="">
.....1111
</div>
<button type="button" onclick="myFunction(this)">Button2</button>
<div id="myDIV2">
"the window 2 with text to be shown"
</div>
<div id="">
.....2222
</div>
0 голосов
/ 10 апреля 2019

Вы можете скрыть все div перед отображением div под кнопкой.Пример: 

getElementsByTagName("div").style.display = "none";
x.style.display = "block";
0 голосов
/ 10 апреля 2019

Я думаю, что в простом Javascript вам нужно снова установить все остальные типы отображения кнопок, когда вы нажимаете другую кнопку, чтобы это сработало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...