JQuery:如何根据点击的内容触发某些事件

JQuery: How to trigger certain events depending on what is clicked?

本文关键字：事件 何根 JQuery      更新时间：2023-09-26

因此，我显示了一行图像，并且我希望在单击每个图片时显示不同的列表项。这是我迄今为止的演示。

https://jsfiddle.net/OneCodeMan/3975prLy/1/

$("img:nth-child(1)").on('click', function() {
  $("#listitem1").text(lines[0]);
});
$("img:nth-child(2)").on('click', function() {
   $("#listitem2").text(lines[1]);
});

但这是八张照片。。所以这是太多的代码做所有这些。我也试着做了一个for循环。

for(var i=0; i < lines.length; i++) {
        $('img.nth-child(' + parseInt(i+1) +')').on('click', function() {
            $("#listitem"+ i+1).text(lines[i]);
        })
    }

但我犯了一个错误：未捕获错误：语法错误，无法识别的表达式：img.nth child（1）

我该如何解决这个问题？

使用.index()

$("img").on("click", function() {
  $("#listitem1").text(lines[$(this).index()]);
});

jsfiddlehttps://jsfiddle.net/3975prLy/3/

您可以使用.index（）和.eq（）完成它，所以：

$("#shots img").on('click', function() {
  var idx=$(this).index();
  $("#alcoholpoem li").eq(idx).text(lines[idx]);
});

查看下面的片段

var lines = ['Eight shots later,',
  'I still remember your name.',
  'I never drank alcohol,',
  'For the taste',
  'This is text',
  'This is text',
  'This is text',
  'This is text'
];
$("#shots img").on('click', function() {
  var idx = $(this).index();
  $("#alcoholpoem li").eq(idx).text(lines[idx]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shots">
  <img src="http://i.ebayimg.com/00/s/NzUxWDY0MA==/z/PRoAAMXQNbxRfYfj/$T2eC16VHJH!FFmOoS6i!BRfYfi6Vl!~~60_12.JPG?set_id=880000500F" width=100 height=100>
  <img src="http://i.ebayimg.com/00/s/NzUxWDY0MA==/z/PRoAAMXQNbxRfYfj/$T2eC16VHJH!FFmOoS6i!BRfYfi6Vl!~~60_12.JPG?set_id=880000500F" width=100 height=100>
  <img src="http://i.ebayimg.com/00/s/NzUxWDY0MA==/z/PRoAAMXQNbxRfYfj/$T2eC16VHJH!FFmOoS6i!BRfYfi6Vl!~~60_12.JPG?set_id=880000500F" width=100 height=100>
  <img src="http://i.ebayimg.com/00/s/NzUxWDY0MA==/z/PRoAAMXQNbxRfYfj/$T2eC16VHJH!FFmOoS6i!BRfYfi6Vl!~~60_12.JPG?set_id=880000500F" width=100 height=100>
  <img src="http://i.ebayimg.com/00/s/NzUxWDY0MA==/z/PRoAAMXQNbxRfYfj/$T2eC16VHJH!FFmOoS6i!BRfYfi6Vl!~~60_12.JPG?set_id=880000500F" width=100 height=100>
  <img src="http://i.ebayimg.com/00/s/NzUxWDY0MA==/z/PRoAAMXQNbxRfYfj/$T2eC16VHJH!FFmOoS6i!BRfYfi6Vl!~~60_12.JPG?set_id=880000500F" width=100 height=100>
  <img src="http://i.ebayimg.com/00/s/NzUxWDY0MA==/z/PRoAAMXQNbxRfYfj/$T2eC16VHJH!FFmOoS6i!BRfYfi6Vl!~~60_12.JPG?set_id=880000500F" width=100 height=100>
  <img src="http://i.ebayimg.com/00/s/NzUxWDY0MA==/z/PRoAAMXQNbxRfYfj/$T2eC16VHJH!FFmOoS6i!BRfYfi6Vl!~~60_12.JPG?set_id=880000500F" width=100 height=100>
</div>
<ul id="alcoholpoem">
  <li id="listitem1"></li>
  <li id="listitem2"></li>
  <li id="listitem3"></li>
  <li id="listitem4"></li>
  <li id="listitem5"></li>
  <li id="listitem6"></li>
  <li id="listitem7"></li>
  <li id="listitem8"></li>
</ul>

相关文章：