Question

所以我显示了一行图像，我想在点击每张图片时显示不同的列表项。这是我到目前为止的演示。

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）

我该如何解决这个问题？

Answer 1

使用.index()

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

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

Answer 2

您可以使用 .index() 和 .eq() 来完成此操作：

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

检查以下代码段

＆＃13;

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]);
});

＆＃13;

<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>

＆＃13;

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

2 个答案: