jquery - jQueryのslideDownとslideUpの奇妙な動作

Question

私が書いたいくつかのjQueryに小さな問題があります。2 つのボタンがあり、その下に div が隠されています。ボタンがクリックされると、slideDown または slideUp を使用して、適切な div がビュー内またはビュー外にアニメーション化されます。私が抱えている問題は、(div を非表示にするために) slideUp が呼び出されると、ボタンも非表示になることです。ボタンはそのままにしておく必要があり、テーブルを含む div のみをアニメーション化する必要があるため、これは正しくありません。

私が言いたいことをよりよく説明するために、以下の jFiddle を作成しました。

http://jsfiddle.net/nH5N7/

そして、ここに私のコードがあります:

HTML:

<div id="rightContent"> 
            <div class="" id="yourAssessments">
                <h3>Your Assessments</h3>
                <div class="innerPadding">      
                    <h4>Please choose an assessment: </h4>          

                        <div class="onlineModuleAssessmentWrapper">
                            <div class="assessmentButton" data-assessment-id="1">Swim Instructor Default</div>
                            <div data-assessment-id="1" class="assessmentTableWrap">
                                <table>

                                        <tr>
                                            <td>
                                                Planning                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Doing It                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Learning and Communication Styles/Techniques                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Debrief                                             </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>
                                                                        </table>
                            </div>
                        </div>

                        <div class="onlineModuleAssessmentWrapper">
                            <div class="assessmentButton" data-assessment-id="3">Test Assessment 3</div>
                            <div data-assessment-id="3" class="assessmentTableWrap">
                                <table>

                                        <tr>
                                            <td>
                                                Planning                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Doing It                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Learning and Communication Styles/Techniques                                                </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                Debrief                                             </td>
                                            <td>
                                                Compelted
                                            </td>
                                        </tr>
                                                                        </table>
                            </div>
                        </div>

                </div>
            </div>

jQuery:

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", '.assessmentButton', function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id");
    if (jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").is(":hidden")) {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideDown("slow");
    } else {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideUp("slow");
    }
});

なぜこれが起こっているのか、どこが間違っているのか誰にもわかりますか? ありがとう！！

Answer 1

コンテナと「ボタン」に同じ data-assessment-id があるため、jquery は両方を非表示にします。これを確認してください：http://jsfiddle.net/nH5N7/4/

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", '.assessmentButton', function() {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
    linkedAssessmentId++
    console.log(linkedAssessmentId)

    if(jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").is(":hidden")) {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideDown("slow"); 
    } else {
        jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideUp("slow");   
    }

});

html:

<div id="rightContent"> 
                <div class="" id="yourAssessments">
                    <h3>Your Assessments</h3>
                    <div class="innerPadding">      
                        <h4>Please choose an assessment: </h4>          

                            <div class="onlineModuleAssessmentWrapper">
                                <div class="assessmentButton" data-assessment-id="1">Swim Instructor Default</div>
                                <div data-assessment-id="2" class="assessmentTableWrap">
                                    <table>

                                            <tr>
                                                <td>
                                                    Planning                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Doing It                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Learning and Communication Styles/Techniques                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Debrief                                             </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>
                                                                            </table>
                                </div>
                            </div>

                            <div class="onlineModuleAssessmentWrapper">
                                <div class="assessmentButton" data-assessment-id="3">Test Assessment 3</div>
                                <div data-assessment-id="4" class="assessmentTableWrap">
                                    <table>

                                            <tr>
                                                <td>
                                                    Planning                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Doing It                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Learning and Communication Styles/Techniques                                                </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    Debrief                                             </td>
                                                <td>
                                                    Compelted
                                                </td>
                                            </tr>
                                                                            </table>
                                </div>
                            </div>

                    </div>
                </div>

Answer 2

「非表示」コードを実行するときは、後で div ではなくボタンで実行します。

フィドルの更新: http://jsfiddle.net/nH5N7/6/

jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").next().slideUp("slow");

「.next()」が追加された上記の行を変更...

Answer 3

上記の答えはすべて正しいです。

「linkedAssessmentId」を使用してキャプチャする必要がある場合に役立つ別の方法

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
    jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").next(".assessmentTableWrap").slideToggle();    
});

また

jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
    var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
   $(this).next("div[data-assessment-id=" + linkedAssessmentId + "]").slideToggle();    
});

Answer 4

まず、ID が一意であることを確認します (すべての ID を削除することもできます)。次に、これは仕事をするはずです：

jQuery(".assessmentTableWrap").hide();

jQuery(document).on("click", ".assessmentButton", function () {
    jQuery(this).next(".assessmentTableWrap").slideToggle();    
});

デモ: http://jsfiddle.net/nH5N7/7/

Answer 5

コードを次のように変更することをお勧めします。

jQuery(".assessmentTableWrap").hide();

jQuery("#yourAssessments").on("click", ".assessmentButton", function () {
    $(this).closest(".onlineModuleAssessmentWrapper")
        .find(".assessmentTableWrap")
        .slideToggle();
});

これは、現在クリックされているボタンを含む親ラッパーを取得し、.assessmentTableWrapその共通コンテナーで を見つけて、そのスライド状態を切り替えます。これを行うために、これらすべてのdata-assessment-id属性を HTML に入れる必要はありません。単に使用するのではなく、共通の親に移動.next()すると、コードが正確な HTML に依存することが少なくなります (たとえば、別の div がどこかに挿入された場合に将来壊れる可能性が低くなります)。

このコードは、委任されたイベント処理のより効率的な親も選択します (すべてを に配置しないことをお勧めしますdocument)。