主页 / 问题 / 805923
Accepted
Vaagn Akopyan
Asked:2020-03-28 18:39:53 +0000 UTC2020-03-28 18:39:53 +0000 UTC

如何在 JS 中将 onclick 设置为几个按钮标签？

  • 772

你好！

意思很简单，就是当你点击某个按钮时，需要打开一个带有某个文本的div（每个按钮的文本都不一样）。问题是实施起来有多容易。是否有必要为每个按钮分配一个单独的 id 并为每个按钮创建一个单独的函数（它用所需的文本绘制一个 div）还是有更人性化的方法？

p / s 有人建议通过课堂来做，但后来我不明白它是如何工作的，因为你不能参考课堂上的特定文本。

<html>
        <head>
                <script type="text/javascript" src="test.js"></script>
                <title>ariadna wiki</title>
                <link rel="stylesheet" type="text/css" href="style.css">
        </head>
            <body>

                <div>
                    <ul>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    </ul> 
                </div>

           </body>
        </html>
javascript

2 个回答

  1. Best Answer

    更新：如果您已经有带有文本的 div，您可以将它们绑定到按钮，例如，通过 name 属性

    var elems = document.getElementsByTagName('button');
for (var i = 0; i < elems.length; i++) elems[i].addEventListener("click", handler);
var current;

function handler(event) {
  if (current) current.style.display = 'none';
  var name = event.target.getAttribute('name');
  current = document.querySelector(`div[name="${name}"]`);
  current.style.display = 'block';
};
    div {
  display: none
}

.menu {
  display: block
}
    <div class='menu'>
  <ul>
    <button name="Первый">1</button>
    <button name="Второй">2</button>
    <button name="Третий">3</button>
    <button name="Четвертый">4</button>
    <button name="Пятый">5</button>
    <button name="Шестой">6</button>
    <button name="Седьмой">7</button>
    <button name="Восьмой">8</button>
    <button name="Девятый">9</button>
    <button name="Десятый">10</button>
  </ul>
</div>
<div name="Первый">1</div>
<div name="Второй">2</div>
<div name="Третий">3</div>
<div name="Четвертый">4</div>
<div name="Пятый">5</div>
<div name="Шестой">6</div>
<div name="Седьмой">7</div>
<div name="Восьмой">8</div>
<div name="Девятый">9</div>
<div name="Десятый">10</div>

    或者，例如，您可以在必要时在属性中存储和替换显示的文本。

    var elems = document.getElementsByTagName('button');
for (var i = 0; i < elems.length; i++) elems[i].addEventListener("click", handler);

function handler(event) {
  document.getElementById('container').innerText = event.target.getAttribute('text');
};
    <div>
  <ul>
    <button text="Первый">1</button>
    <button text="Второй">2</button>
    <button text="Третий">3</button>
    <button text="Четвертый">4</button>
    <button text="Пятый">5</button>
    <button text="Шестой">6</button>
    <button text="Седьмой">7</button>
    <button text="Восьмой">8</button>
    <button text="Девятый">9</button>
    <button text="Десятый">10</button>
  </ul>
</div>
<div id="container">
  Пустой
</div>

    • 2

  2. 如果容器内的按钮与其容器内的 div 顺序相同，则可以通过按钮索引打开 div：

    var buttons = document.querySelectorAll('ul button');
for(var i = 0; i < buttons.length; i++) {
	(function(index){
		buttons[i].addEventListener('click', function(){
			var divIndex = index*1+1*1;
			document.querySelector('.divs div:nth-of-type('+divIndex+')').style.background = 'red'; // здесь прикрутите открытие блока
		});
	})(i);
}
    <ul>
	<button>Кнопка 1</button>
	<button>Кнопка 2</button>
</ul>
<div class="divs">
	<div>Текст блока 1</div>
	<div>Текст блока 2</div>
</div>

    .divs带有 div 的容器在哪里（您可以将其更改为您自己的类）

    • 0

相关问题