Получить значение из кнопки объединенной группы и раскрывающегося списка

Question

Я очень близок к тому, чтобы получить значение при нажатии кнопки ИЛИ элемент из выпадающего списка, но я бы хотел, чтобы моя функция ничего не ждала или не печатала, когда пользователь выбирает OTHER кнопка, потому что это означает, что значение будет получено из выпадающего списка

Я также не совсем уверен, что написанный мной код JS является самым элегантным. Помимо удаления undefined Я также надеялся получить помощь в рефакторинге кода?

Любая помощь приветствуется !!

var header = document.getElementById("test");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
    
  // Set results to value, unless it's other
  // then set to the value of the selected dropdown
  document.getElementById("results").innerHTML = $(this).attr("value")
  });
}

  $(".dropdown-item").click(function () {
         var value = $(this).attr("value");
     document.getElementById("results").innerHTML = value   
   });

.btn-grey {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn-secondary:hover {
  background-color: #666;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="test">
  <div class="btn-group" role="group">
  <button class="btn btn-grey active", type="button", value="NONE">NONE</button>
  <button class="btn btn-grey", type="button", value="A">A</button>
  <button class="btn btn-grey", type="button", value="B">B</button>
  <button class="btn btn-grey", type="button", value="C">C</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      OTHER <span class='caret'></span>
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#3" value="3">3</a>
      <br>
      <a class="dropdown-item" href="#2" value="4">4</a>
    </div>
  </div>
</div>
  

<div id="results"></div>

Codepen также включен, если это проще: https://codepen.io/mayagans/pen/dyoppZK

Answer 1

Вы можете решить это с помощью JQuery

$('body').on('click', 'button[value], a.dropdown-item', function(){
  var value = $(this).attr('value');
  $('#results').html(value)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="test">
  <div class="btn-group" role="group">
  <button class="btn btn-grey active" type="button" value="NONE">NONE</button>
  <button class="btn btn-grey" type="button" value="A">A</button>
  <button class="btn btn-grey" type="button" value="B">B</button>
  <button class="btn btn-grey" type="button" value="C">C</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      OTHER <span class='caret'></span>
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#3" value="3">3</a>
      <br>
      <a class="dropdown-item" href="#4" value="4">4</a>
    </div>
  </div>
</div>
  

<div id="results"></div>

Answer 2

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

-> С переменными от var до const, поскольку переменные считываются только ..

-> Используется let внутри для l oop ..

-> Заменено innerHTML на textContent (используйте innerHTML только вы назначаете html элемент else, если это просто текст, тогда используйте textContent ..

const header = document.getElementById("test");

const btns = header.querySelectorAll('.btn');


for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
    console.log();
  // Set results to value, unless it's other
  // then set to the value of the selected dropdown
    if($(this).attr("value")){
        document.getElementById("results").textContent = $(this).attr("value")
    }

  });
}

  $(".dropdown-item").click(function () {
         const value = $(this).attr("value");
     document.getElementById("results").textContent = value   
   });

.btn-grey {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn-secondary:hover {
  background-color: #666;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="test">
  <div class="btn-group" role="group">
  <button class="btn btn-grey active", type="button", value="NONE">NONE</button>
  <button class="btn btn-grey", type="button", value="A">A</button>
  <button class="btn btn-grey", type="button", value="B">B</button>
  <button class="btn btn-grey", type="button", value="C">C</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      OTHER <span class='caret'></span>
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#3" value="3">3</a>
      <br>
      <a class="dropdown-item" href="#2" value="4">4</a>
    </div>
  </div>
</div>
  

<div id="results"></div>

Answer 3

Во-первых, я бы создал две функции обратного вызова: одну для нажатия кнопки и одну для нажатия на выпадающий элемент.

Во-вторых, я бы назначил клики двум различным наборам результатов выбора запросов: один для кнопок и один для выпадающих элементов. При циклическом переключении кнопок проверьте, указывает ли имя класса текущей кнопки, что это выпадающий элемент; назначать прослушиватель событий только в том случае, если он не является выпадающим элементом.

var buttons = header.getElementsByClassName("btn")
var dropdownItems = header.getElementsByClassName("dropdown-item")
var buttonClickCallback = function (event) { ... }
var dropdownItemClickCallback = function (event) { ... }

buttons.forEach((button) => {
  if(!button.classList.hasClass('dropdown-toggle') {
    button.addEventListener('click', buttonClickCallback)
  }
})
dropdownItems.forEach((dropdownItem) => {
  dropdownItem.addEventListener('click', dropdownItemClickCallback)
})

Answer 4

Вы можете использовать указанный c класс "not-dropdown" только для ваших не выпадающих элементов и выбирать только их при изменении значения.

См. Во фрагменте

$("#test").find(".btn").each((index1, element) => {
  const jqueryElement = $(element);
  jqueryElement.on('click', () => {

    $("#test").find(".btn").each((index2, element2) => {
      if($(element2).hasClass("active")){
        $(element2).removeClass("active");
      }
    });

    jqueryElement.addClass("active");
    $("#results").html(jqueryElement.attr("value"));

  });
});

$(".dropdown-item").click(function () {
  var value = $(this).attr("value");
  $("#results").html(value);
});

.btn-grey {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn-secondary:hover {
  background-color: #666;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="test">
  <div class="btn-group" role="group">
  <button class="btn btn-grey not-dropdown active", type="button", value="NONE">NONE</button>
  <button class="btn btn-grey not-dropdown", type="button", value="A">A</button>
  <button class="btn btn-grey not-dropdown", type="button", value="B">B</button>
  <button class="btn btn-grey not-dropdown", type="button", value="C">C</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      OTHER <span class='caret'></span>
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#3" value="3">3</a>
      <br>
      <a class="dropdown-item" href="#2" value="4">4</a>
    </div>
  </div>
</div>
  

<div id="results"></div>