Question

我有以下图片列表：

<ul class="docs-pictures clearfix">
    <li><img data-original="../assets/img/tibet-5.jpg" src="../assets/img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
    <li><img data-original="../assets/img/tibet-6.jpg" src="../assets/img/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
    <li><img data-original="../assets/img/tibet-7.jpg" src="../assets/img/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
    <li><img data-original="../assets/img/tibet-8.jpg" src="../assets/img/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
    <li><img data-original="../assets/img/tibet-9.jpg" src="../assets/img/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
</ul>

我想模拟第一张图片上的点击，所以我做了：

$('.docs-pictures li:first').trigger('click');

但它不起作用。

我尝试为第一个id设置img：

<li><img id="img1" data-original="../assets/img/tibet-5.jpg" src="../assets/img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>

然后我做了：

$("#img1").click()

它有效，但我需要通过<ul>类

来完成

Answer 1

您正在触发点击li，而在示例中，您正在触发img

你应该做的是

$(".does-pictures li:first img").click();

这应该有效。或者将你的触发功能移动到li上。

Answer 2

我认为你应该使用

$('.docs-pictures li').first().trigger('click');

您可以在https://api.jquery.com/first/

查看.first文档

这是我为测试而创建的小提琴：https://jsfiddle.net/c96Lueso/

Answer 3

您的代码是正确的，但您的点击事件可能不正确，请参阅示例：

$('li').on('click',function(){
  alert("clicked");	
})

$(document).ready(function(){
  $('.docs-pictures li:first').trigger('click');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="docs-pictures clearfix">
    <li><img data-original="../assets/img/tibet-5.jpg" src="../assets/img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
    <li><img data-original="../assets/img/tibet-6.jpg" src="../assets/img/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
    <li><img data-original="../assets/img/tibet-7.jpg" src="../assets/img/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
    <li><img data-original="../assets/img/tibet-8.jpg" src="../assets/img/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
    <li><img data-original="../assets/img/tibet-9.jpg" src="../assets/img/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
</ul>

jquery模拟点击第一个li项目

3 个答案: