怎样将这段代码简化，做到让jquery根据li里的a链接进行加载?

Question

怎样将这段代码简化，做到让jquery根据li里的a链接进行加载?以下是很死的办法，给每个li指定了个id 然后load相应页面。。要怎么简化？JS没学好 唉。
HTM:<ul>
<li><a href="1.htm" id="a">demo</a></li>
<li><a href="1.htm" id="b">demo2</a></li>
...
</ul>JS:
$(document).ready(function() { 
$('#a').click(function() { 
$(this).addClass("on"); 
$("#mian .onload").show();
$('#main').load('1.html #img',function(){
$("#mian .onload").hide();
});
}); 
$('#b').click(function() { 
$("#mian .onload").show();
$('#main').load('2.html #img',function(){
$("#mian .onload").hide();
});
}); 

Answer 1

把要动态加载的内容放到a标签的某个自定义属性里面 通过this对象访问 一个方法就一个实现了 不需要逐个绑定

Answer 2

来个demo吧 没明白 我需要的是li下a链接按下后 #main加载对应位置。

Answer 3

$(document).ready(function() { 
$('ul li a').click(function() { 
if(this.id == 'a') {
    $(this).addClass("on"); 
}$("#mian .onload").show();
var location = "";
if(this.id == 'a') {
    location = "1.html #img";
} else {
   location = "2.html #img"; 
}
$('#main').load(location,function(){
$("#mian .onload").hide();
});
}); 
}); 

Answer 4

没测试，你试试:$(document).ready(function() { 
 var li=$("div li");
 li.each(function(index, element) {
element.click(function(){
   this.addClass("on"); 
   $("#mian .onload").show();
   var href=this.find("a").atrr("href");
$('#main').load(href+' #img',function() {
$("#mian .onload").hide();
});
})
 })
});

Answer 5

有30个li 这怎么办呢 我记得jquery好像可以判断li下的a链接
我只知道做法，忘记怎么写了。唉，请大神们指教
大概的做法是：
var alink= {
'a' : 'page1.html',
'b' : 'page2.html',
'c' : 'page3.html',
'd' : 'page4.html'
} var z=0;
$.each(Tabs,function(i,j){
var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');mp.find('a').data('page',j);

Answer 6

这样试试$(document).ready(function() { 
 var li=$("div li");
 li.each(function(index, element) {
        element.click(function(){
           $(this).addClass("on"); 
           $("#mian .onload").show();
           var href=this.find("a").atrr("href");
            $('#main').load(href+' #img',function() {
                $("#mian .onload").hide();
            });
        })
     })
})

Answer 7

var lis=$("li");
for(var i=0;i<lis.length;i++){
 var li=lis.eq(i);
 li.load(li.find("a").attr("href")+" #img");
}以上代码只是将a链接的内容加载至li，其他还想做什么？

Answer 8

其实 这是个面试题。
题目如下：
HTM中有许多id为数字的超链接<a id="数字"></a> 请根据以下写法将代码进行简化，要不如果#1...#1000，总不可能写1000次？这个数字用$i代替怎么写？
$('#数字').click(function() { 
$(this).addClass("on"); 
$("#mian .onload").show();
$('#main').load('数字.html',function(){
$("#mian .onload").hide();
});
}); $('#数字').click(function() { 
$("#mian .onload").show();
$('#main').load('数字.html',function(){
$("#mian .onload").hide();
});
});
...

Answer 9

i不就是li的数量么0到$("li").length-1循环就可以了阿。

Answer 10

$('a').click(function() {
var $this = $(this),
nodeId = $this.attr('id'),
reg = /^\d+$/;

//判断id是否为数字
if (reg.test(nodeId)) {
$(this).addClass("on"); 
$('#mian .onload').show();
$('#main').load(nodeId + '.html', function(){
$("#mian .onload").hide();
});
}
})