2011-12-05 2 views
0

웹 페이지가 http://www.replyonline.co.uk/DirectionGroup/xmas/이고, 팝업 중 하나의 텍스트에 <a href="...">...</a>을 추가하려고합니다.JavaScript 내에서 HTML 작업하기

첫 번째 빨간색 사각형을 클릭하면 거기에 하이퍼 링크로 연결하려는 이메일 주소가 있습니다. HTML을 사용하여 하이퍼 링크를 시도하면 사이트가 완전히 분리됩니다.

// opens one image item (fullscreen) 
loadImgPreview = function($item, callback) { 
    var largeSrc = $item.children('img').data('largesrc'), 
    description  = $item.children('span').html(), 
    largeImageData = { 
      src   : largeSrc, 
      description : description 
    } 
}); 

공지 사항이 내 .html(), 난이 생각 :

나는 내가 이것을 사용하여 이미지 팝업 내에서 HTML을 추가는 자바 스크립트 라인 (235)

에 시작하는 할 필요가 있다고 생각 이미지 팝업 내에서 HTML을 활성화합니다.

JavaScript를 실제로 알지 못해서 약간 분실했습니다.

감사합니다. 감사합니다.

+1

"사이트가 완전히 분리되어 있음"이란 무엇을 의미합니까? 'email @ domain.com' 텍스트를'[email protected]'으로 변경하면 잘 작동합니다. –

+0

사이트를 다시 새로 고침하십시오. Tim

+0

It looks like you're surrounding everything in 'a' anchors, which is bad practice for this exact reason. I would suggest changing the surrounding anchor with a span or div. –

답변

0

먼저 정의 된 페이지가 <!DOCTYPE html> (HTML 5) 인 경우 페이지에 HTML validation errors이 많으므로이를 알고 있어야합니다.

HTML 5는 앵커 내부에 인라인 요소와 블록 요소 (예 : div)를 모두 허용하지만 내부에 다른 앵커를 허용하지 않으며 네비게이터에 오류로 표시됩니다.

두 번째로 탐색기가 자동으로 이러한 오류를 수정하므로 앵커 내부에 전자 메일 링크를 추가하면 예상보다 먼저 앵커 닫기 태그 (</a>)를 추가하여 자동으로 수정됩니다. 그것은 엉망이 된 것을 설명합니다.

<div class="ib-whatever"> 

및 jQuery를 호출 $ibItems = $ibWrapper.find('div.ib-main > a')에서에 : : 또한

$ibItems = $ibWrapper.find('div.ib-main > div') 

변화

당신이 당신의 품목, $ibItems.bind('click.ibTemplate', function(event) {...를로드 jQuery를 사용하고있는 바와 같이, 내 제안은 그 앵커 <a class="ib-whatever">을 변경하는 것입니다 style.css line 78부터 .ib-main a {까지 :

.ib-main .ib-image, .ib-main .ib-content { 

그리고 올바른 방향으로 작업하게 될 것입니다.

희망이 있습니다.

0

HTML에서 링크를 만들 때 사이트가 깨지는 경우 자바 스크립트로 작업 할 때 페이지가 깨지게됩니다. DOM은 다를 것이 없습니다.

jQuery의 .html() 함수는 html 또는 일부를 사용할 수 없으며 객체의 HTML에 대한 접근 자/변형 자입니다. description = $item.children('span').html()이하는 일은 선택한 요소의 HTML을 가져 오는 것이고 어떤 종류의 기능을 사용하거나 사용하지 않도록 설정하는 것이 아닙니다. html()에 대한 자세한 내용은 jQuery API을 참조하십시오.

문제에 관해서는 일반 HTML을 통해 링크를 삽입 할 때 사이트가 정확히 왜 고장되는지 조사해 보시기 바랍니다.