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

(this).parent().find('.classname') not working

本文关键字：classname 不起作用 find this parent      更新时间：2023-09-26

我试图有一个点击事件，用户点击一个div问题，然后Jquery克隆div答案，并显示在一个单独的div克隆。

的例子:http://jsfiddle.net/jessikwa/zNL63/2/

由于某种原因，下面的变量返回null。什么好主意吗?

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

现在showAnswer和hideAnswer里面的this将被点击的元素

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

试题:

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

并将.faqClone的CSS应用于.faq-answer

您甚至可以从数据属性生成简短的答案:)来缩短更多的HTML。

相关文章：