jquery - 通过单击另一个元素触发对一个元素的单击

Question

<div class="news">
 <div class="news-item"></div>
 <div class="news-item"></div>
 <div class="news-item"></div>
</div>

<div class="news-info">
 <div class="info-item"></div>
 <div class="info-item"></div>
 <div class="info-item"></div>
</div>

嗨!我有一个 html 代码就像上面一样。我如何通过单击上面“新闻”div 中的每个元素来触发“新闻信息”div 中每个“信息项”元素的点击事件(使用 jQuery)？我的意思是:当我点击第一个新闻元素时触发第一个信息元素的点击事件，第二个和第三个也是如此。我试过类似的东西:

$( ".news" ).each(function() {

        $(this).find( "news-item" ).on('click', function() {

            $('.news-info').find('.info-item').trigger('click');

        });

    });

Answer 1

您可以使用 eq() 来根据索引选择元素，并使用 index() 获取元素的索引。使用这两个函数，您可以轻松地将第一个容器中的 i-th 元素映射到第二个容器中的 i-th 元素。

$(".news .news-item").click(function() {
  $(".news-info").find(".info-item").eq($(this).index()).trigger('click');
});


/* To test the click event */
$(".info-item").click(function() {
  $(this).css('color', 'red');
})

div {
  padding: 10px;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news">
  <div class="news-item">a</div>
  <div class="news-item">b</div>
  <div class="news-item">c</div>
</div>

<div class="news-info">
  <div class="info-item">1</div>
  <div class="info-item">2</div>
  <div class="info-item">3</div>
</div>