Question

网站

查看开发版本

包含的库：

vaccordian
滚轮
jquerytools
缓和

vicordian嵌入了一个'可滚动'元素（JQuery工具）来升级＆amp;下载各种内容

目标

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

据我的研究表明.data（）方法和浏览器都支持这两种方法，因为.data（）包含在jquery 1.4+中。

问题可能出在我的语法中吗？如果有替代方法，那么我很欣赏建议。

Steven Dons提出了一个很好的论据，为什么我不应该使用attr（）。：

可以，但不应该，尤其是在操纵数据而不是阅读数据时。＆gt;使用attr（），数据返回DOM。对于data（），它是分开保存的。如果你用attr（）更改一个值，那么用data（）读取它会得到不同的值。此外，＆gt; attr（）仅处理字符串，data（）将转换为本机类型，如整数。＆gt;无论你做什么，都不要混用attr（）和data（），除非你真的知道你在做什么。我的经验法则是使用attr（）来读取原始DOM元数据或更改DOM＆gt;属性并将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元素中检索出来的，还是我的ajax使用不正确？ Javascript已启用。我已经在堆栈上做了相当多的阅读，并且围绕这个主题遇到了一些其他有用的问题，并且学到了一些有用的注意事项，但非能够澄清这个场景中的问题。可能我可以看到这是一个非常简单的事情，希望永远不会忘记，不得不告诉浏览器在你的HTML顶部启用某些东西或允许某些语法
我想也许如果它是jquery语法的问题，那么这可以从firefox的检查器中清楚地看出来。任何人都可以解释如何使用它来查看实时消息/错误，或使用检查器诊断问题的方法吗？

Answer 1

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

AJAX从数据属性加载URL - 错误的语法或浏览器兼容性？

网站

目标

当前语法

正在使用的HTML

我的调查

1 个答案: