带有 .slim 文件的 jquery DOM 包括答案

【问题标题】：jquery DOM with .slim file include带有 .slim 文件的 jquery DOM 包括
【发布时间】：2015-11-08 11:59:44
【问题描述】：

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

我正在尝试隐藏/编辑 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 并制作了一个小提琴（如果这会有所帮助...）： https://jsfiddle.net/y7q6ca3d/2/

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

谢谢！

【问题讨论】：

你可能会寻找 load(); jsfiddle.net/y7q6ca3d/3
Slim 在服务器端运行，所以在执行 JavaScript 时，不再进行 Slim 处理。

标签： jquery html css include slim-lang

【解决方案1】：

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

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

【讨论】：