Boa tarde pessoal! Estou com uma dúvida, teria como selecionar dois botões ? exemplo: Tenho uma div com 5 botões, porém só posso selecionar dois, quando eu selecionar os dois botões o nome contido nos botões terá qu…

Selecionar no máximo dois botões

1 Resposta

MarcoBruno 18 de jan. de 2016

Noite. Tudo bom?

Da uma olhada se esse exemplo ajuda:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To select two button</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="menu.css">
  <link rel="stylesheet" href="button.css">
</head>
<body>
  <nav class="wrap-menu">
    <ul class="menu">
      <li class="menu-item">
        <button class="button" data-position="first">First</button>
      </li>

      <li class="menu-item">
        <button class="button" data-position="second">Second</button>
      </li>

      <li class="menu-item">
        <button class="button" data-position="third">Third</button>
      </li>

      <li class="menu-item">
        <button class="button" data-position="fourth">Fourth</button>
      </li>

      <li class="menu-item">
        <button class="button" data-position="last">Last</button>
      </li>
    </ul>
  </nav>

  <script src="button.js"></script>
</body>
</html>

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}

ul, ol, li {
  list-style: none;
}

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
}

button {
  font-size: inherit;
}

CSS (menu.css)

.menu {
  text-align: center;
  padding-top: 1em;
}
.menu-item {
  display: inline-block;
}

CSS (button.css)

.button {
  background-color: rgba(209, 213, 216, .8);
  color: #FFF;
  padding: .3em .5em;
  cursor: pointer;

  transition: background-color .2s linear;
}
.button.isActive {
  background-color: rgba(147, 101, 184, .8);
  cursor: auto;
}
.button:hover {
  background-color: rgba(147, 101, 184, 1);
}

JavaScript (button.js)

(function () {
  'use strict';

  var $menu = document.querySelector('.menu');
  var counter = 0;

  var activeElements = [];

  $menu.addEventListener('click', function (event) {
    var $this = event.target;

    if ($this.classList.contains('button') && activeElements.length == 2) {
      activeElements.shift().classList.remove('isActive');
    };
    activeElements.push($this);

    activeElements.forEach(function ($element) {
      $element.classList.add('isActive');
    });
  });
})();

Se tiver qualquer dúvida sobre o código só falar.

1 Resposta

Topicos relacionados