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

Question

我正在嘗試一個單擊事件，用戶單擊一個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("");
    }
});

Answer 1

解決此問題的最簡單方法是通過引用傳遞處理程序：

faqQuestion.click(showAnswer);

faqClone.click(hideAnswer);

現在， this里面showAnswer和hideAnswer將是點擊的元素。

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

@Kevin B建議使用更合理或更清潔的解決方案。

Answer 3

使它更簡單，使用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。