Question

需要一些帮助...我有以下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-->

Answer 1

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

Answer 2

您可以在选择器中加入img，例如：

＆＃13;

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

＆＃13;

Answer 3

.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");
            });
        }

Answer 4

将单击处理程序附加到元素时，$(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()可能很有用。

jQuery＆＃39;这个＆＃39;遵循.find点击功能

4 个答案: