2

jQueryコードが期待どおりに機能しません。

HTMLは次のとおりです。

<a href="">Some link</a>
<br/>
<a class="delete_file_initial" href="">Delete file</a>
<span class="delete_file_question hide">are you sure to delete?</span>
<a class="delete_file_question confirm hide" href="http://example.com/delete">yes</a>
<a class="delete_file_question cancel hide" href="">no</a>
<br/>
<a class="move_file_initial" href="">Move file</a>
<span class="move_file_question hide">are you sure to move?</span>
<a class="move_file_question confirm hide" href="http://example.com/move">yes</a>
<a class="move_file_question cancel hide" href="">no</a>

そしてJavascript：

$(function() {
    // delete file
    $("a.delete_file_initial").click(function(event) {
        event.preventDefault()
        $(this).hide()
        $(".delete_file_question").show()
    });
    $("a.delete_file_question").click(function(event) {
        if ($(this).hasClass("cancel")) {
            event.preventDefault()
            $(".delete_file_question").hide()
            $(".delete_file_initial").show()
        }
    });

    // move file
    $("a.move_file_initial").click(function(event) {
        event.preventDefault()
        $(this).hide()
        $(".move_file_question").show()
    });
    $("a.move_file_question").click(function(event) { 
        if ($(this).hasClass("cancel")) {
            event.preventDefault()
            $(".move_file_question").hide()
            $(".move_file_initial").show()
        }
    });

});

2つの類似したコードブロックがあります：削除と移動。ロードする実際のURLが異なることを除いて、同じことを行うことになっています。予想される動作は次のとおりです。ユーザーが「削除」/「移動」のリンクをクリックすると、確認リンクが表示され、アクションを確認またはキャンセルします。

問題は、リンク「delete_file_initial」をクリックすると非表示になりますが、リンク「delete_file_question」が表示されず、空白行が残ることです。「move」ブロックは期待どおりに機能します。そして、「move」ブロックにコメントすると、「delete」ブロックが期待どおりに機能し始めます。さらに奇妙なことに、このバグはGoogle Chrome 22.0.1229.79に表示されますが、Firefox15.0.1ではすべて正常に機能します。

このバグを修正する方法は？

4

3 に答える 3

0

ここで問題はセレクターにあります。jQuery（'。classname'）。show（）を使用するときは、同じクラス名を持つ複数のアイテムがないことを確認してください。仕方がない場合は、.each（）関数を使用してください。たとえば、使用する必要のあるコードは次のとおりです。以下がうまくいくことを願っています

Javascript：

$(function() {
    // delete file
    $("a.delete_file_initial").click(function(event) {
        event.preventDefault();
        $(this).hide();
        $(".delete_file_question").each(function(){$(this).show();});
    });
    $("a.delete_file_question").click(function(event) {
        if ($(this).hasClass("cancel")) {
            event.preventDefault()
            $(".delete_file_question").each(function(){$(this).hide();});
            $(".delete_file_initial").show();
        }
    });

    // move file
    $("a.move_file_initial").click(function(event) {
        event.preventDefault();
        $(this).hide();
        $(".move_file_question").each(function(){$(this).show();});
    });
    $("a.move_file_question").click(function(event) { 
        if ($(this).hasClass("cancel")) {
            event.preventDefault();
            $(".move_file_question").each(function(){$(this).hide();});
            $(".move_file_initial").show();
        }
    });

});

動作するかどうか教えてください

于 2012-10-10T13:20:05.213 に答える
0

問題はJavaScriptではなく、奇妙なことにHTMLコードにありました。<br/>前に最初のタグを削除しましたが、<a class="delete_file_initial" href="">Delete file</a>正常に機能し始めました。<a>コードブロック全体は、タグで区切られた一連のタグでした<br/>。それらをシンプルな構造に置き換えた<ul><li>ところ、元のレイアウトと機能を維持しながら問題は解決しました。

誰かがこの問題の理由を理解しているなら、私に知らせてください。

于 2012-10-12T08:01:59.490 に答える
0

setTimeout(function(){$(".delete_file_question").each(function(){$(this).show();});},0);

于 2015-08-18T13:28:11.153 に答える