jQuery show() 在 Google Chrome 中不起作用

Question

我的 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()
        }
    });

});

有两个类似的代码块:删除和移动。它们应该做同样的事情，只是要加载的实际 URL 不同。预期行为如下。用户点击“删除”/“移动”链接，然后会显示一个确认链接，用户可以确认或取消该操作。

问题是，当我单击链接“delete_file_initial”时，它会隐藏，但链接“delete_file_question”不会显示，留下一个空行。 “移动” block 按预期工作。如果我评论“移动” block ，“删除” block 就会开始按预期工作。更奇怪的是，这个bug出现在Google Chrome 22.0.1229.79中，但在Firefox 15.0.1中一切正常。

如何修复这个错误？

Answer 1

这里的问题出在选择器中，当您使用 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();
        }
    });

});

让我知道它是否有效