如何在 jQuery 中选择深度跨度元素？答案

【问题标题】：How to select a deep span element in jQuery?如何在 jQuery 中选择深度跨度元素？
【发布时间】：2023-03-29 07:57:01
【问题描述】：

这是我的一个博客模板，每个帖子都有这个 HTML：

        <div class="box">
        <div class="box2">
            <div class="box-main2"><div class="hole"></div>
                <div class="post"></div>
                <div style="width:100%; height: 32px; padding-top: 0px; position: relative ;">
                        <div class="btn" style="float:left;">more...</div>
                        <div class="info-box" style="float:right;">
                            <div><span class="date">2013, March, 3</span><span class="author">Komeyl</span><span class="comment"><sup>23</sup></span></div>
                        </div>
                </div>
            </div>
            <div class="box-bottom" >
                <div id="commentPanel">


                </div>
                <div class="box-bottom2"></div>
            </div>
        </div>
        </div>

我想在 span 标签中选择评论类，以便当用户单击它时，commentPanel 类从框底部向下滑动，并在下次单击发生时向上滑动，这应该是每个评论类应该选择自己的评论面板，因为会有很多评论和评论面板类。我写了这个 jQuery，但它不能按我想要的方式工作：

$('.comment').toggle(function(){
    $(this).addClass('click');
    $('.box-bottom #commentPanel').slideDown(300);
    $('.box-bottom2:first').show(100);
},function(){
    $(this).removeClass('click');
    $('.box-bottom #commentPanel').slideUp(200);
$('.box-bottom2:first').hide(100);
}
);

box-bottom2 类是应该随commentPanel出现和消失的框的底部图片。

【问题讨论】：

你用的是什么 jQuery 版本？

标签： jquery jquery-selectors

【解决方案1】：

[编辑]

试试这个：JSFiddle

$('span.comment').click(function(){
    $(this).closest('.box2').find('#commentPanel,.box-bottom2').slideToggle();
});

将style="display:none" 添加到评论面板，使其在加载时不可见

【讨论】：

【解决方案2】：

Working Demo

(function ($) {
    $.fn.clickToggle = function (func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function () {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));
$('.comment').clickToggle(function () {
    $(this).addClass('click');
    $(this).parents('.box-main2').next('.box-bottom').find('#commentPanel').slideDown(300).next('.box-bottom2:first').show(100);
},

function () {
    $(this).removeClass('click');
    $(this).parents('.box-main2').next('.box-bottom').find('#commentPanel').slideUp(200).next('.box-bottom2:first').hide(100);
});

或更短的代码

DEMO

$('.comment').click(function () {
    $(this).toggleClass('click');
    $(this).parents('.box-main2').next('.box-bottom').find('#commentPanel').slideToggle(300).next('.box-bottom2:first').toggle(100);
});

【讨论】：