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代码。如何在每个＆＃39; info-item＆＃39;上触发点击事件（使用jQuery）？来自＆＃39; news-info＆＃39;的元素div点击上面的新闻＆＃39;中的每一个元素。 DIV？我的意思是：当我点击第一个新闻项目以触发第一个信息项目上的点击事件时，同时针对第二个和第三个信息项目触发点击事件。我尝试过类似的东西：

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

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

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

        });

    });

Answer 1

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

$(".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>

Answer 2

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

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

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

    });

});

Answer 3

如果相应的div顺序匹配，您可以通过.news-item获取所点击的index()的索引，然后通过eq()找到另一个。从那里你可以触发点击。我添加了第二个单击处理程序作为示例。

$('.news .news-item').on('click', function() {
  var currentIndex = $(this).index();

  $('.news-info .info-item').eq(currentIndex).trigger('click');
});

$('.news-info .info-item').on('click', function() {
  console.log("I'm " + this.textContent + " and I've been clicked or clicked through a trigger!")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news">
  <div class="news-item">News Item 1</div>
  <div class="news-item">News Item 2</div>
  <div class="news-item">News Item 3</div>
</div>

<div class="news-info">
  <div class="info-item">Info Item 1</div>
  <div class="info-item">Info Item 2</div>
  <div class="info-item">Info Item 3</div>
</div>

Answer 4

你可以这样做

$(".news div:first").click(function() {
$( ".news-info div:first" ).trigger( "click" ); 
});

在线试用https://jsfiddle.net/2w27nLos/

通过单击另一个元素触发单击元素

4 个答案: