jQuery 'this' 跟随一个 .find click 函数

jQuery 'this' following a .find click function

本文关键字：一个 find 函数 click this 跟随 jQuery 更新时间：2023-09-26

需要一些帮助...我有以下JavaScript代码：

        var quickSection = $('.quick-links');
        var quickContent = $('.quick-links .row .inner-content')
        if ( quickSection.is('*') ) {
            quickContent.find("img").click(function() {
                $(this).find("ul").slideDown("slow");
            });
        }

我的变量 quickContent 有三个实例。每个都有一个ul，img等。我需要显示与单击的图像相关的 ul。我认为上面的代码可以解决问题，但我想"this"也从上一行返回".find（img）"。关于如何以最有效的方式解决此问题的任何提示？任何帮助都非常感谢。

.html：

<div class="quick-links block">
        <div class="main-wrap container">
            <div class="row">
                <div class="col-sm-4 first column">
                    <div class="inner-content">
                        <h2>Admissions<a><img src="/sites/all/themes/merge/img/blue-down.png" /></a></h2>
                        <ul>
                            <li><a>Apply Now</a></li>
                            <li><a>Schedule a Visit</a></li>
                            <li><a>Student Life</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
                <div class="col-sm-4 second column">
                    <div class="inner-content">
                        <h2>Academics<a><img src="/sites/all/themes/merge/img/green-down.png" /></a></h2>
                        <ul>
                            <li><a>A Liberal Arts Degree</a></li>
                            <li><a>College of Arts &amp; Sciences</a></li>
                            <li><a>College of Business</a></li>
                            <li><a>College of Health Sciences</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
                <div class="col-sm-4 third column">
                    <div class="inner-content">
                        <h2>Student Life<a><img src="/sites/all/themes/merge/img/gold-down.png" /></a></h2>
                        <ul>
                            <li><a>Campus Photo Tour</a></li>
                            <li><a>Student Organizations</a></li>
                            <li><a>Residence Life</a></li>
                            <li><a>Facilities</a></li>
                            <li><a>Food &amp; Drink</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->
    </div><!--end quick-links-->

this将是点击的图像，而不是quickContent的元素。您需要上升到容器，然后向下搜索相应的ul。

quickContent.find("img").click(function() {
    $(this).closest(".inner-content").find("ul").slideDown("slow");
}

或者，如果它们都是同一元素的子元素，则可以使用：

quickContent.find("img").click(function() {
    $(this).siblings("ul").slideDown("slow");
}

您可以在

选择器中包含img，例如：

var quickSection = $('.quick-links');
if (quickSection.is('*')) {
  $('.quick-links .row .inner-content img').click(function() {
    $(this).parents("h2").next("ul").slideDown("slow");
  });
}

.parent（）将做到这一点，因为它将当前范围更改为包含您单击的图像的div。

 var quickSection = $('.quick-links');
        var quickContent = $('.quick-links .row .inner-content')
        if ( quickSection.is('*') ) {
            quickContent.find("img").click(function() {
                $(this).parent().find("ul").slideDown("slow");
            });
        }

当您将

单击处理程序附加到元素时，$(this)将引用单击的元素;在这种情况下，图像也是如此。由于你在quickContent中有多个jQuery对象，你可能必须遍历DOM树才能找到你需要的对象。像这样：

quickContent.find("img").click(function(){
  $(this).parents('.quick-links .row .inner-content').find("ul").slideDown("slow");
}

很可能有一种更有效的方法，具体取决于您的确切 DOM 结构。例如，jQuery函数.next()、.prev()或.siblings()可能很有用。