Question

我正在尝试做这样的事情：

假设在加载页面之前，页面结构如下：

<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。但我想覆盖href以查看在点击showmore按钮时生成的所有链接。

有没有办法这样做？

（这只是我向你解释的一个案例。我也想更改一些CSS。有没有一种方法可以改变所有的东西？）

Answer 1

只需将其写入其他功能

即可

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);
   }

}

尝试在您的代码中实现此功能。

Answer 2

根据您的要求编辑，现在每隔一秒运行一次，持续10秒，点击“showmore”链接后。

更优雅的解决方案是通过比较每个循环运行中集合中元素的数量来停止添加新元素的时间间隔。

var modify_links_cycle = 0;
var modify_links_interval = null;

$('.maindiv').on('click', '.showmore', function() {
  clearInterval(modify_links_interval);
  modify_links_interval = setInterval(function() {
    // your modifications to the links
    $('.maindiv .divlink').attr('href', 'http://www.facebook.com');
    // /end
    modify_links_cycle++;
    if (modify_links_cycle === 9) {
      clearInterval(modify_links_interval);
    }
  }, 1000);
});

样式到动态创建的元素

2 个答案: