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

});

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

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

如何修复这个错误？

4

3 回答 3

0

问题不在 javascript 中，而奇怪的是在 HTML 代码中。我之前删除了第一个<br/>标签<a class="delete_file_initial" href="">Delete file</a>，它开始正常工作。<a>整个代码块是由标签分隔的一系列<br/>标签。我用一个简单的<ul><li>结构替换它们，问题已经解决，保持原有的布局和功能。

如果有人了解此问题的原因，请告诉我。

于 2012-10-12T08:01:59.490 回答
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

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

于 2015-08-18T13:28:11.153 回答