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(...)

将解决这个问题。

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

3 个答案: