我正在尝试做这样的事情:
假设在页面加载之前,页面的结构是这样的:
<div class="maindiv">
<div><a href="www.google.com" class="divlink">div1</a></div>
<div><a href="www.google.com" class="divlink">div2</a></div>
<div><a href="www.google.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>
现在我正在使用jQuery并覆盖这样的链接的
href
$('document').ready(function(){
$('.divlink').attr('href','www.facebook.com');
});
因此,加载后,页面将是这样的。
<div class="maindiv">
<div><a href="www.facebook.com" class="divlink">div1</a></div>
<div><a href="www.facebook.com" class="divlink">div2</a></div>
<div><a href="www.facebook.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>
到现在为止还可以。
现在,当有人单击showmore链接时,接下来的三项将追加到maindiv上。在所有六个
div
之后,将删除此链接,并创建一个新的showmore链接。现在,整个页面将如下所示:<div class="maindiv">
<div><a href="www.facebook.com" class="divlink">div1</a></div>
<div><a href="www.facebook.com" class="divlink">div2</a></div>
<div><a href="www.facebook.com" class="divlink">div3</a></div>
<div><a href="www.google.com" class="divlink">div1</a></div>
<div><a href="www.google.com" class="divlink">div2</a></div>
<div><a href="www.google.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>
所有这些功能都是标准的,这意味着我什么也做不了。我只能编写一些jQuery代码来覆盖链接的
href
。由于我的文档的jQuery onready
事件,仅前三个元素的href
将被覆盖。但是我想覆盖所有在单击showmore按钮时生成的链接的href
。有办法吗?
(这只是我向您解释的一种情况。我还想更改更多的CSS。是否有一种方法可以更改所有内容?)
最佳答案
只需用其他函数编写即可
function somefunctiontoloadmoreitems()
{
$('.divlink').attr('href','www.facebook.com');
}
告诉您是否要这个吗?我不确定。
function appendvalues(href, classname)
{
var maindiv = document.getElementById("maindiv").childNodes;
for(var i=0; i<maindiv.length; i++)
{
maindiv[i].setAttribute("href",href);
maindiv[i].setAttribute("class",classname);
}
}
尝试在您的代码中实现这一点。