dom을 변경하지 않고 Javascript 페이지 오버레이

Question

JS를 배우는 중입니다. 내 페이지의 모든 링크에 정수 (클릭 수)를 추가하려고합니다.이 데이터는 외부 API에서 파싱됩니다.

현재 각 링크에 대한 textContent 링크를 변경하고 모든 텍스트 링크에서 잘 작동하는 textContent 끝에 정수를 추가하지만이 클릭 수를 이미지에 추가하는 데 문제가 있습니다. 그 페이지. 페이지의 이미지에 대한 클릭 수를 표시하는 가장 좋은 방법은 무엇입니까? 클릭 수를 이미지의 오버레이로 추가 할 수 있습니까? 지금까지

내 코드 :

function ls(url) { 
    var getURL = "url" + url; 
    var req = new XMLHttpRequest(); 
    req.open("GET", getURL, "true"); 
    req.onload = function() { 
    var resObj = JSON.parse(req.responseText); 
    var links = document.querySelectorAll("a"); 
    for (var i = 0; i < links.length; i++) { 
     var rawLink = links[i].href; var linkText = links[i].textContent; var link = links[i].href.replace(/(.*)#?/, "$1"); 
     var escapedLink = escape(rawLink); 
     if (rawLink in resObj) { 
     links[i].textContent = linkText + " (" + resObj[rawLink] + ")"; 
     } else if (escapedLink in resObj) { 
     links[i].textContent = linkText + " (" + resObj[escapedLink] + ")"; 
     } 
    } 
    }; 

이것은 단지 내가 페이지 레이아웃을 엉망으로하지 않고 이미지에이 linkcount을 추가 할 수 있습니다 어떻게는 TextContent의 마지막에 링크 카운트를 추가합니다.

Answer 1

하나의 해결책은 <div>에 이미지를 래핑하고 클릭 수 텍스트를 다른 자식으로 추가하는 것입니다. 예 :

<div class="image-wrapper"> 
    <img src="..." alt="..." /> 
    <div class="click-count">10</div> 
</div> 

그런 다음 CSS를 사용하여 이미지의 구석에 배치 할 클릭 수 텍스트의 스타일을 지정하십시오. 아마 같은 것을 :

$('img').each(function() { 
    // Test we need to add the click count 
    ... 

    // Add the click count number 
    $(this).wrap('<div class="image-wrapper" />').append('<div class="click-count">' + click_count + '</div>'); 
}); 

:

.image-wrapper { position: relative; } 
.click-count { position: absolute; bottom: 10px; right: 10px; } 

이미지에 텍스트를 추가하려면, 당신은 같은 것을 (나는 간단하게하기 위해 jQuery를 사용하고 그리고 질문과 같은 태그가 있기 때문에주의를)해야 할 것입니다