触发孩子时如何更改父母的值？

Question

我想做一些类似下拉菜单的操作，以便我的用户可以选择他们想要 gmail、hotmail 还是 Outlook。然后，我希望按钮更新以显示他们的偏好。由于分配原因，我必须只使用引导程序，因此不能使用 。

到目前为止，我已经尝试给他们所有相同的id，但是JS只是使用第一个，我不想给他们所有不同的ID（太麻烦了）。所以我写的是使用子编号（如数组）并将值放入按钮中。但是，我不知道如何找出当前 html 标记的位置编号。请帮助我，并提前感谢您的帮助

使用的引导 CDN（引导 4.6.0）： 链接 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" 完整性="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 +l" crossorigin="匿名"

<div class="input-group-append">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>@example.com</button>
  <div class="dropdown-menu"  id='emailexample'>
    <a class="dropdown-item" role='button' onclick='example()'>@gmail.com</a>
    <a class="dropdown-item" role='button' onclick='example()'>@hotmail.com</a>
    <a class="dropdown-item" role='button' onclick='example()'>@outlook.com</a>
    <a class="dropdown-item" role='button' onclick='example()'>@yahoo.com</a>
  </div>
</div>
<script>
   function example() { 
var c = document.getElementById('emailexample').children;
txt = c[i].textContent
document.getElementById("btnemailexample").innerHTML = txt;
   }
   
</script>

Answer 1

在您的情况下，您不需要搜索 id 或孩子，您可以使用事件参数。

<div class="input-group-append">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>@example.com</button>
  <div class="dropdown-menu"  id='emailexample'>
    <a class="dropdown-item" role='button' onclick='example(event)'>@gmail.com</a>
    <a class="dropdown-item" role='button' onclick='example(event)'>@hotmail.com</a>
    <a class="dropdown-item" role='button' onclick='example(event)'>@outlook.com</a>
    <a class="dropdown-item" role='button' onclick='example(event)'>@yahoo.com</a>
  </div>
</div>
<script>
   function example(event) { 
    var txt = event.target.textContent;
    document.getElementById("btnemailexample").innerHTML = txt;
   }
   
</script>

Answer 2

在这种情况下，最好的解决方案是使用事件委托，这将减少您的 ID 或类标记问题，为每个元素添加功能等。它还将帮助您获得所需的数据。

这是event delegation上的一篇好文章

Answer 3

这应该可以解决问题！

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id='btnemailexample' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     @example.com
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#" role='button' onclick='example(this)'>@gmail.com</a>
    <a class="dropdown-item" href="#" role='button' onclick='example(this)'>@hotmail.com</a>
    <a class="dropdown-item" href="#" role='button' onclick='example(this)'>@outlook.com</a>
    <a class="dropdown-item" href="#" role='button' onclick='example(this)'>@yahoo.com</a>
  </div>
</div>

<script>
function example(el) {
  var txt = el.textContent;
  document.getElementById("btnemailexample").innerHTML = txt;
}
</script>

Answer 4

如果你有一些像 jQuery 这样的 JavaScript 库，你可以做得更好。我会告诉你如何通过这两种方式做到这一点。

请注意，我没有链接任何样式。因此，请务必将它们链接起来以获得更好的可见度。

使用核心 Javascript

// Add event listener to table
const el = document.getElementById("emailexample");
el.addEventListener("click", function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement,
    text = target.textContent || target.innerText;
  document.getElementById("btnemailexample").textContent = text;
}, false);

<div class="input-group-append">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>@example.com</button>
  <div class="dropdown-menu" id='emailexample'>
    <a class="dropdown-item" role='button'>@gmail.com</a>
    <a class="dropdown-item" role='button'>@hotmail.com</a>
    <a class="dropdown-item" role='button'>@outlook.com</a>
    <a class="dropdown-item" role='button'>@yahoo.com</a>
  </div>
</div>

使用 jQuery

​​>

$("#emailexample .dropdown-item").on('click', function(e) {
  e.preventDefault();
  var text = $(this).text();
  $("#btnemailexample").text(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group-append">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>@example.com</button>
  <div class="dropdown-menu" id='emailexample'>
    <a class="dropdown-item" role='button'>@gmail.com</a>
    <a class="dropdown-item" role='button'>@hotmail.com</a>
    <a class="dropdown-item" role='button'>@outlook.com</a>
    <a class="dropdown-item" role='button'>@yahoo.com</a>
  </div>
</div>