1

网站

开发中的构建可以在randomactsofviolet.com查看

包含的库:

  • 瓦科迪安
  • 鼠标滚轮
  • jQuery工具
  • 缓和

vaccordian 嵌入了一个“可滚动”元素(JQuery 工具)来上下移动各个页面的内容

目标

我正在尝试使用 JQuery 的/Ajax .load() 方法加载动态内容,并将我正在使用 JQuery 的 .data() 方法检索的 URL 传递给它。可能会注意到,我还使用数据属性“状态”测试内容是否已经加载,并且只有在状态未定义时才调用 load() 函数。
我的印象是我的语法和数据属性的使用都是正确的,因为我设法在 Firefox 和 Dreamweaver 的预览窗口中获得了全部功能,但很快就发现我的方法在 chrome 或 IE9 中不起作用。

据我的研究表明, .data() 方法和浏览器都支持,因为 .data() 包含在 jquery 1.4+ 中。

问题可能出在我的语法中吗?如果有替代方法,那么我很感激建议。

Steven Dons 很好地论证了为什么我不应该使用 attr()。:

可以,但不应该,尤其是在操作数据而不是读取数据时。>使用 attr(),数据返回到 DOM。使用 data(),它是分开保存的。如果你 > 用 attr() 改变一个值,然后用 data() 读取它,你会得到不同的值。>attr() 也只处理字符串,data() 将转换为原生类型,如整数。>无论你做什么,除非你真的知道你在做什么,否则不要混合使用 attr() 和 data()。我的经验法则是使用 attr() 读取原始 DOM 元数据或更改 DOM >properties 并使用 data() 获取应用程序状态。– 史蒂文唐 3 月 17 日 10:44

当前语法

$('.va-slice').bind("expand", function(evt) {
                // bind an 'expand' event and test for defined state of slice
                if (typeof $(evt.target).data('state') === 'undefined') {
                    //if undefined, find the content div within the target and store its url attribute
                    var url = $(evt.target).find('.va-content').data("url");
                    //then load the url into the div using ajax
                    $(evt.target).find('.va-content').load(url);
                    //Set state attribute as expanded
                    $(evt.target).data('state', 'expanded');
                } else {
                    //Just set the state to expanded & allow the accordian script to open the panel
                    $(evt.target).data('state', 'expanded');
                }
            }).bind("collapse", function(evt) {//collapse function
                $(evt.target).data('state', 'collapsed');                   
            }).toggle(function() { // toggle between functions
                $(this).trigger("expand");
            }, function() {
                $(this).trigger("collapse");
            });


//note the line $(evt.target).data('state', 'expanded'); in else definition is not present on the live site,but is in my local version and doesnt affect the issue in question.

正在使用的 HTML

<div class="va-slice about">
            <h3 class="va-title">About</h3>
            <div class="va-content" data-url="about.html">
            <div class="loadspace"></div>
            </div>
        </div>

我的调查

要么没有从 div 元素中检索 URL,要么我的 ajax 使用有问题?Javascript 已启用。我已经对堆栈进行了相当多的阅读,并且遇到了围绕该主题的一些其他有用问题,并学习了一些有用的注意事项,但无法澄清这种情况下的问题。可能我可以看到这是一件非常简单的事情,希望永远不会忘记就像必须告诉浏览器在你的 html 顶部启用某些东西或允许某些语法
我想也许如果它是 jquery 语法的问题那么这可以从在Firefox的检查员中。谁能解释如何使用它来查看实时消息/错误,或使用检查器诊断问题的方法?

4

1 回答 1

1

代码看起来不错,但是如果您查看开发人员工具栏/firebug/inspector 的网络选项卡(所有浏览器中的 F12),您将看到“投资组合”部分中的所有项目请求返回 404(找不到文件)。在 FF 的 firebug 中也有这样的选项卡,但您可能需要在单击 div 之前启用它并打开 Firebug。可能 - 您的网址不正确。或者您在服务器上没有文件。关于萤火虫-坦率地说,不知道该怎么说。如果出现错误,将在其窗口的某处显示一条消息。很难错过。单击它将打开控制台。单击某些消息将显示 JS 代码中发生错误的行。在脚本选项卡中,您可以设置断点、查看变量状态等。基本上就像在任何带有调试器的 IDE 中一样。只是谷歌关于萤火虫及其功能。

于 2012-09-10T21:56:47.050 回答