网站
开发中的构建可以在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的检查员中。谁能解释如何使用它来查看实时消息/错误,或使用检查器诊断问题的方法?