jquery DOM 包含 .slim 文件

Question

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

我正在尝试 hide/edit div '#page1' 中的代码，使其为空白。
并编辑 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时，我在第1页上使用了.hide()，在第2页上使用了.show()。

jquery DOM 包含 .slim 文件

jquery DOM with .slim file include

html

css

jquery

include

slim-lang