2014-10-08 4 views
0

JS, Jquery, Bootstrap 작업 3. 개별적으로 트리거되는 다중 모달을 작성하는 대신 임베드 된 컨텐츠를 기반으로 모달을 채우고 임베드 된 컨텐츠로 모달을 채우는 스크립트를 작성했습니다.내 JS if 문에 문제가 있습니까?

모달 마크 업 :

<div class="modal fade" id="ideasmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog modal-lg"> 
<div class="modal-content"> 
<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> 
<span class="sr-only">Close</span></button> 
<h4 class="modal-title" id="myModalLabel"></h4> 
</div> 
<div class="modal-body" id="library-content"></div> 
</div> 
</div> 
</div> 

트리거 :

<a data-frame="http://path.to.url" data-content="embed" class="btn btn-primary modaltrigger" role="button">Learn More</a> 
<a data-frame="http://path/to/image.png" data-content="image" class="btn btn-primary modaltrigger" role="button">Learn More</a> 

JS

$(document).ready(function(){ 
$(".modaltrigger").click(function(){ 
    var dataContent = this.getAttribute("data-content"); 
    if (dataContent = "embed") { 
     var modalClass = 'embed-responsive embed-responsive-16by9'; 
     var modalContent = this.getAttribute("data-frame"); 
     var modalBody = document.createElement("IFRAME"); 
     var embedContainer = document.createElement("DIV"); 
     embedContainer.setAttribute("class", modalClass); 
     modalBody.setAttribute("src", modalContent) 
     modalBody.setAttribute("class", "embed-responsive-item"); 
     modalBody.setAttribute("frameborder", "0"); 
     document.getElementById("library-content").appendChild(embedContainer); 
     embedContainer.appendChild(modalBody); 
     $('#ideasmodal').modal('show'); 
    } 
    else if (dataContent = "image") { 
     var modalContent = this.getAttribute("data-frame"); 
     var modalBody = document.createElement("IMG"); 
     modalBody.setAttribute("src", modalContent); 
     modalBody.setAttribute("class", "img-responsive"); 
     document.getElementById("library-content").appendChild(modalBody); 
     $('#ideasmodal').modal('show'); 
    } 
}); 
$(".close").click(function(){ 
    document.getElementById("library-content").innerHTML= ""; 
}); 
}); 

그래서 라이브 사이트에 나는 데이터 내용이 링크를 클릭하면됩니다 무슨 일이 일어나고 있는지 = "image", 사이트는 여전히 iframe을 생성하는 대신 내 if 문의 이미지 (ELSE)를 직접 포함합니다. 부트 스트랩의 반응 형 임베드 클래스에 정의 된 비율에 국한되지 않고 싶다는 것만 제외하면 큰 문제는 아닙니다. 내 이미지가 항상 4 : 3 또는 16 : 9 비율에 맞춰지는 것은 아닙니다.

나는 JS에 매우 익숙하다. 그래서 매우 분명한 것을 놓친다면 사과한다. 나는 콘솔/디버거로 이걸 실행했고, toString이 허용되지 않는다는 것 외에는 내게 던져지는 에러를 얻지 못한다. (검색에서이 사이트를 볼 때 플래시 문제 일 때 무시할 수있다.)

+6

'='비교를 할 때 ==='이어야합니다.'='변수를 설정할 것입니다. – smerny

+0

http://jshint.com과 같은 도구를 사용하여 일반적인 오류를 찾는 것을 고려하십시오. –

+0

이전에 해당 사이트를 본 적이 없습니다. 고맙습니다! 그것은 북마크되고있다. – user3366357

답변

6

는 만 가지고 1 =

if (dataContent == "embed") { 
    //logic 
} else if (dataContent == "image") { 
    //logic 
} 
1

는 ==되지해야 모두 당신의 문에 같습니다.

if (dataContent == "embed") { 
    var modalClass = 'embed-responsive embed-responsive-16by9'; 
    var modalContent = this.getAttribute("data-frame"); 
    var modalBody = document.createElement("IFRAME"); 
    var embedContainer = document.createElement("DIV"); 
    embedContainer.setAttribute("class", modalClass); 
    modalBody.setAttribute("src", modalContent) 
    modalBody.setAttribute("class", "embed-responsive-item"); 
    modalBody.setAttribute("frameborder", "0"); 
    document.getElementById("library-content").appendChild(embedContainer); 
    embedContainer.appendChild(modalBody); 
    $('#ideasmodal').modal('show'); 
} 
else if (dataContent == "image") { 

= 할당 ==는 비교에 사용됩니다.