jquery - 通过点击事件在 div 之间切换

Question

我有这段代码。基本上，我喜欢做的是，当点击 cpu_div 时，我喜欢显示 all_cpu div，当点击 all_cpu div 时，我喜欢显示 cpu_div。这个想法是在 div 之间来回切换：

html code:

<div id="cpu_all"> </div>
<div id="cpu_div"></div>


       var serverA = "http://url/cpu.png";
       $("#cpu_div").click(function () {
        var myImage = new Image();
        $(myImage).load(function () {

            $('#all_cpu').show();
            $("#all_cpu").html(myImage);

        }).error(function () {
            $('#all_cpu').hide();
         }).attr('src', serverA)
    });

    $("#all_cpu").click(function () {
        $('#all_cpu').hide();
        $("#cpu_div").show();
    });

当点击 cpu_div 时，它会调出 all_cpu div 但是当点击 all_cpu div 时，什么也没有发生。任何人都可以插话看看这里有什么问题吗？

Answer 1

$("#cpu_div, #all_cpu").on('click', function() {
    $("#cpu_div, #all_cpu").not(this).show();
    $(this).hide();
});

如果这仍然不起作用，请尝试一下：

$(document).on('click', '#cpu_div, #all_cpu', function() {
    $("#cpu_div, #all_cpu").not(this).show();
    $(this).hide();
});

此外，在我看来，使用本机 onload 函数会是一个更好的主意：

$("#cpu_div, #all_cpu").on('click', function() {
    var myImage = new Image();

    myImage.src = 'http://url/cpu.png';
    myImage.onload = function() {
         //do stuff
    }
});

Answer 2

正如@Adrian 所建议的那样，如果没有您的 HTML，我们就无法知道正在发生的一切，但听起来您想要toggle()这两个 div 的可见性

$("#all_cpu,#cpu_div").click(function () {
    $('#all_cpu').toggle();
    $("#cpu_div").toggle();
});

Answer 3

问题是，您在尝试加载图像后设置了 attr('src') 。将您的代码更改为

 $(myImage).attr('src', serverA).load(...)

会解决的。