Question

我有两个div：

<div id="div_h">
    <canvas class="canvas" width="570" height="428" id="myCanvas"></canvas>
</div>


<div  id="div_p">
    <canvas class="canvas" width="828" height="528" id="canvas"  ></canvas>
</div>

我有一个按钮可以改变这些div的内容：

$('#finish').click(function() {

                $el_div_h = $('#div_h');
                $el_div_p = $('#div_p');

                $div_h      = $el_div_h.html();
                $div_p  = $el_div_p.html();

                $el_div_h.empty();
                $el_div_p.empty();

                $el_div_h.html($div_p);
                $el_div_p.html($div_h);

            });

但是当我点击完成按钮时，画布变为白色。我的画布内容是两个不同的图像。

Answer 1

您可以使用以下内容：

$('#finish').click(function() {
    var elms1 = $('#div_h').children().detach();
    var elms2 = $('#div_p').children().detach();
    $('#div_h').append(elms2);
    $('#div_p').append(elms1);
    console.log($('#div_h').find("canvas").attr("id"));
    console.log($('#div_p').find("canvas").attr("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="finish">FINISH</button>
<div id="div_h">
    <canvas class="canvas" width="570" height="428" id="myCanvas"></canvas>
</div>
<div  id="div_p">
    <canvas class="canvas" width="828" height="528" id="canvas"  ></canvas>
</div>

这将使<canvas>保持完整，因为您没有存储<div> s'HTML代码，而是存储这些容器的子元素。

如何改变两个div的内容 - 画布

1 个答案: