包含 .slim 文件的 jquery DOM

Question

当用户将鼠标悬停在“.arrow img”上时:

1. 我正在尝试隐藏/编辑 div“#page1”内的代码，使其为空白。

2. 然后编辑 div“#page2”内的代码，使其成为“include page2”

但是，到目前为止，它只是将其添加为文本(在页面上打印“include page2”)。

我一直在尝试 .append、.appendTo、.html。

jquery 文件:

$(document).ready(function(){
    $('.arrow img').mouseover(function(){
        //$("#page1").[the code edit function (I don't know it)]
        $( "#page2" ).append( "include page2-pg" );
    });
});

html/slim:

div id="page1"
    include page1-pg
div id="page2"
    div id="page2-pg"

对于那些不了解 slim 的人，我将其翻译成 html 并制作了一个 fiddle (如果有帮助的话...): https://jsfiddle.net/y7q6ca3d/2/

我只是为向上箭头使用了一张随机图片，尽管它在我电脑上的文件中。 悬停功能没有问题，只是它只在文本中添加行而不是代码..

谢谢!

Answer 1

我没有将“include...”添加到 index.slim，而是确保“include...”已经存在，但在 js 文件中使用 .hide() 隐藏。

然后当箭头为 .mouseover 时，我在 page1 上使用了 .hide()，在 page2 上使用了 .show()。