我构建了一个非常基本的动态AJAX函数,使用jQuery将内容加载到当前页面。
我在一个非常通用的页面上对它进行了测试并让它顺利运行,但是只要我将这些代码放入实际的生产网站我想要它就行不通。
我已经尝试了各种方法来实现这一点,所以我不确定现在还能做什么。我有一种琐碎的感觉,我在生产网站上使用了错误的选择器。虽然这可能只是因为缺乏信心(初学者),但实际上我认为jQuery根本就不起作用。
以下是代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> $(document).ready(function(){
var a = $('article.announce');
var s = $('#info li a');
// You only need to change the above two pieces of code.
s.click(function(){
var url = $(this).html(),
clicked = $(this).attr('data-id');
$(s+'[data-id='+clicked+']').click(function(){
a.load(url+'.html')
});
});
});</script>
我试图定位的HTML如下:
<aside id="info" class="clearfix">
<h1>About Us ></h1>
<h2>Other Stuff:</h2>
<ul>
<li><a href="#" data-id="1">About</a></li>
<li><a href="#" data-id="2">Contact</a></li>
<li><a href="#" data-id="3">Examples</a></li>
</ul>
</aside>
<article class="announce">
<p>Text to be replaced will be here!</p>
</article>
希望我已经给你足够的信息,看看这里有什么问题。感谢。
答案 0 :(得分:0)
$(s+'[data-id='+clicked+']').click(function(){
a.load(url+'.html')
});
s是对象,但它应该是字符串,将它放在s.click函数之外
答案 1 :(得分:0)
您正在点击内部点击试用:
$(document).ready(function(){
var a = $('article.announce');
var s = $('#info li a');
s.click(function(){
var url = $(this).html();
a.load(url+'.html')
});
});
确保你的第一个html文件是大写的
答案 2 :(得分:0)
更改HTML标记:
<aside id="info" class="clearfix">
<h1>About Us ></h1>
<h2>Other Stuff:</h2>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="example.html">Examples</a></li>
</ul>
</aside>
<article class="announce">
<p>Text to be replaced will be here!</p>
</article>
然后这样做:
$(function() {
var a = $('.announce');
$('#info li a').on('click', function(e) {
e.preventDefault();
a.load($(this).attr('href'));
});
});
答案 3 :(得分:-1)
您只需要1次点击活动。
var a = $('article.announce');
var s = $('#info li a');
s.click(function(){
var url = $(this).
a.load(url+'.html');
});