jquery - 使用触发器()在最近的 div 上强制单击

Question

嗨，我有以下代码:

$('.myInput').click(function() {
  $('.addon').trigger('click');
});

$('.addon').click(function() {
  console.log("Clicked");
});

.wrapper {
  display: flex;
  flex-direction: column;
}
.inputWithAddon {
  display: flex;
  margin-bottom: 10px;
}
input {
  height: 20px;
}
.addon {
  width: 26px;
  height: 26px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
</div>

当我单击输入时，我想在绿色 div 上使用 trigger() 强制单击。这应该位于当前单击的输入的 div 上(右侧)。目前，它调用所有绿色 div 的单击(查看控制台)。我只想对单击输入的 div 执行此操作。我尝试了closest():

$(this).closest('.addon').trigger('click');

没有成功。

有什么想法吗？

谢谢。

Answer 1

尝试使用 Jquery 的同级属性

$(this).siblings('.addon').trigger('click');