繁体   English   中英

(this).parent()。find('。classname')不起作用

[英](this).parent().find('.classname') not working

我正在尝试一个单击事件,用户单击一个Div问题,然后Jquery克隆该Div Answer并将其显示在单独的Div Clone中。

此处的示例: http : //jsfiddle.net/jessikwa/zNL63/2/

由于某种原因,以下变量返回空值。 有任何想法吗?

 var answer = $(this).parent().find(".faq-answer").clone();

完整代码:

$(document).ready(function () {
    var faqQuestion = $('.faq-question');
    var faqClone = $('.faq-clone');

    faqQuestion.click(function () {
        showAnswer();
    });

    faqClone.click(function () {
        hideAnswer();
    });

    function showAnswer() {
        $(".faq-clone").hide("slide");
        $('.faq-clone').html("");

        var answer = $(this).parent().find(".faq-answer").clone();
        $('.faq-clone').append(answer.html());
        $(".faq-clone").show("slide");
    }

    function hideAnswer() {
        $(".faq-clone").hide("slide");
        $('.faq-clone').html("");
    }
});

解决此问题的最简单方法是通过引用传递处理程序:

faqQuestion.click(showAnswer);

faqClone.click(hideAnswer);

现在, this里面showAnswerhideAnswer将是点击的元素。

您不能通过函数中的$(this)访问元素。 您需要将其作为参数传递。

尝试:

function showAnswer(passedObject) {
    $(".faq-clone").hide("slide");
    $('.faq-clone').html("");

    var answer = passedObject.parent().find(".faq-answer").clone();
    $('.faq-clone').append(answer.html());
    $(".faq-clone").show("slide");
 }

然后您将使用该函数: showAnswer($(this))

@Kevin B建议使用更合理或更清洁的解决方案。

使它更简单,使用next() jQuery函数

有什么理由要克隆隐藏的元素而只显示其克隆

演示

$(document).ready(function () {
    var faqQuestion = $('.faq-question');
    var faqClone = $('.faq-answer');
    faqQuestion.click(showAnswer);
    faqClone.click(hideAnswer);

    function showAnswer() {
        $(this).next('.faq-answer').show('slide');
    }

    function hideAnswer() {
        $(this).hide("slide");
    }
});

并应用于.faq-answer .faqClone CSS

您甚至可以从数据属性中得出简短答案:)以缩短更多HTML。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM