스타일 동적 요소

Question

내가 이런 일을하려고를 생성합니다 :

가정 페이지가로드되기 전에, 페이지의 구조는 다음과 같다 : 나는 jQuery를하고 오버라이드 (override)를 사용하고

이제

<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> 

이

$('document').ready(function(){ 
    $('.divlink').attr('href','www.facebook.com'); 
}); 

같은 링크의 href 그래서 로딩 후, 페이지는 이렇게 될 것입니다.

<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에 추가됩니다. 이 링크는 삭제되고 새로운 쇼모어 링크가 6 개 모두 작성된 후 div이 생성됩니다. 전체 페이지는 다음과 같이됩니다.

<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> 

이 모든 기능이 표준적인 방법이므로이 모든 작업을 수행 할 수 있습니다. 링크의 href을 덮어 쓰는 jQuery 코드 만 작성할 수 있습니다. 내 jQuery onready 이벤트로 인해 처음 세 요소 만 href으로 대체됩니다. 그러나 showmore 버튼을 클릭 할 때 생성되는 모든 링크에 대해 href을 덮어 쓰고 싶습니다.

그렇게 할 방법이 있습니까?

Answer 1

그냥 몇 가지 다른 기능에 쓰기 (이것은 내가. 나는 또한? 나는 모든 상황을 타개 할 수있는 방법이 있습니다. 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); 
    } 

} 

코드에서 구현하십시오.

Answer 2

요청에 따라 편집되었으므로 이제 'showmore'링크를 클릭 한 후 10 초 동안 1 초마다 실행됩니다.

새로운 요소가 추가 될 때마다주기 실행마다 집합의 요소 수를 비교하여 더 많은 '우아한'해결책이 될 수 있습니다.

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