Question

我尝试点击事件，用户点击Div问题，然后Jquery克隆Div答案并将其显示在单独的Div Clone中。

此处示例： 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("");
    }
});

Answer 1

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

faqQuestion.click(showAnswer);

faqClone.click(hideAnswer);

现在this showAnswer和hideAnswer内的{{1}}将成为点击的元素。

Answer 2

您无法在函数中按$（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))

或更合乎逻辑的＆amp;更清洁的解决方案是@Kevin B所建议的。

Answer 3

使其更简单，使用next() jQuery函数

您是否有任何理由要克隆隐藏元素并仅显示其克隆？

<强> DEMO

$(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。

（this）.parent（）。find（'。classname'）不起作用

3 个答案: