如何在触发子级时更改父级的值？

Question

我想做一些类似于下拉列表的事情，以便我的用户可以选择他们是想要gmail、hotmail还是outlook。然后，我希望按钮更新以显示他们的偏好。我必须只使用引导，因此不能使用

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

使用Bootstrap CDN（Bootstrap 4.6.0）： link rel=样式表href=https://cdn.jsdelivr.net/npm/bootstrap@4.6.0 /dist/css/bootstrap.min.css完整性=sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l"交叉起源="匿名"

<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或类标记问题，向每个元素添加函数，等等。它还将帮助您获得所需的数据。

这是一篇关于事件委托的好文章

Answer 2

在您的情况下，不需要搜索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 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>