HTML div의 innerHTML 섹션 내에 버튼을 추가하려면 어떻게해야합니까?

Question

JavaScript에서 꽤 새롭다. & html & css에서 JQuery를 더 잘 알고 있지만, 나는 며칠 동안 일하고 책상에 머리를 두드려서 알아낼 수없는 뭔가가있다. 어쩌면 누군가가 나를 도울 수 있었고, 어떤 암시라도, 제안은 크게 감사하게 될 것입니다 !!

<div id="projects" class="fluid"> 
<button onClick="myFunction2()" class="viewprojectsclose">Close</button> 
<button onclick="myFunction()" class="viewprojects">View Projects</button> 
<div id="projectsimg"> 
</div> 
<div id="projectstxt"> 
</div> 
</div> 

다음과 같은 자바 스크립트와 jQuery로 :

function myFunction() { 

document.getElementById("projectstxt").innerHTML = 'some text some text some text'; 
document.getElementById("projectstxt").style.borderBottom = "thin solid #000" ;  
document.getElementById("projectstxt").style.display = "block"; 
document.getElementById("projectstxt").style.paddingBottom ="10px";  

     document.getElementById("projectsimg").style.padding = "100px" ; 
     document.getElementById("projectsimg").style.background =  "url('../Assets/img/services/image1.png')" ; 
     document.getElementById("projectsimg").style.backgroundRepeat = "no-repeat"; 
     document.getElementById("projectsimg").style.backgroundSize = "20%"; 
     document.getElementById("projectsimg").style.display = "block"; 
     document.getElementById("projectsimg").style.transition = "all 0.5s ease-in-out"; 
     document.getElementById("projectsimg").style.backgroundOrigin = "border-box"; 
     document.getElementById("projectsimg").style.marginTop = "5%"; 
;} 
function myFunction2() { 
    document.getElementById("projectstxt").style.display = "none"; 
    document.getElementById("projectsimg").style.display = "none"; 
;} 

$(document).ready(function() 
    { 
    $(".viewprojects").click(function(){ 
    $("#projects").animate({ 
     height:"300px" 
     }); 
    }); 
    $(".viewprojectsclose").click(function(){ 
    $("#projects").animate({ 
     height:"80px" 
     }); 
    }); 
    });  

은 기본적으로 우리가 (OPEN 및 CLOSE) 2 개 버튼이

나는 다음과 같은 HTML이있다. 첫 번째는 이미지를 열고 DIV 텍스트와 두 번째 텍스트를 닫습니다. 내가 뭘 하려는지 특정 페이지로 리디렉션됩니다 (div 이내) 이미지 아래에 다른 단추를 추가하는 것입니다. 이미지 DIV의 일반 버튼을 HTML로 추가 할 수 있지만 첫 번째 버튼을 클릭 할 때만 나타나야하고 (그리고 innerHTML이 열리는) 기본적으로 버튼이 나타나는 페이지를로드 할 때. 이것은 JS에 어떻게 든 추가해야한다는 것을 의미합니다. 닫고 div를 재설정하면 첫 번째 OPEN 버튼을 클릭 할 때만 버튼이 나타납니다. 첫 번째 버튼을로드하지 못하도록 JS 스크립트가 무엇인지 잘 모르고 JS 내 첫 번째 버튼을 클릭 할 때만로드합니다.

어떤 도움도 신이 될 수 없습니다 !! 미리 감사드립니다.

Answer 1

예, 자바 스크립트 및 jquery의 버튼에 대해 click 핸들러를 오버 라이딩 했으므로 충돌이 있습니다. 당신은 전혀 그것을 할 필요가 없습니다. 당신은 MHO에 JQuery와에 충실하고 너무 같은 click 핸들러에 적절한 DOM 변경 사항을 추가해야합니다 :

$(document).ready(function() 
{  
$(".viewprojects").click(function(){ 

    //Animate first 
    $("#projects").animate({ 
    height:"300px" 
    }); 

//Update DOM 
document.getElementById("projectstxt").innerHTML = 'some text some text some text'; 
document.getElementById("projectstxt").style.borderBottom = "thin solid #000" ;  
document.getElementById("projectstxt").style.display = "block"; 
document.getElementById("projectstxt").style.paddingBottom ="10px";  

document.getElementById("projectsimg").style.padding = "100px" ; 
document.getElementById("projectsimg").style.background =   "url('../Assets/img/services/image1.png')" ; 
document.getElementById("projectsimg").style.backgroundRepeat = "no-repeat"; 
document.getElementById("projectsimg").style.backgroundSize = "20%"; 
document.getElementById("projectsimg").style.display = "block"; 
document.getElementById("projectsimg").style.transition = "all 0.5s ease-in-out"; 
document.getElementById("projectsimg").style.backgroundOrigin = "border-box"; 
document.getElementById("projectsimg").style.marginTop = "5%"; 
}); 


$(".viewprojectsclose").click(function(){ 
    document.getElementById("projectstxt").style.display = "none"; 
    document.getElementById("projectsimg").style.display = "none"; 

    //Animate the div 
    $("#projects").animate({ 
    height:"80px" 
    }); 
}); 

});  

을 지금, 나는 얼마나 해결하는 당신에게 이해를 제공하기 위해 당신이 질문에 게시 코드를 재구성 한 그것. 코드는 단순화되고 용이하게하기 위해 Jquery 스펙에 따라 적절히 변경되어야합니다. 그것은 당신이 스스로 할 수있는 간단한 운동입니다.

추신 : 방금 언급 한 변경 사항을 반영하기 위해 fiddle을 업데이트했으며 정상적으로 작동하는 것 같습니다. 다시 말하지만, Jquery 구문은 적절하지 않지만 의도적 인 것으로 알고 있습니다. 어쨌든, 당신이 올바른 방향으로 시작하게되기를 바랍니다. 또한 자바 스크립트와 Jquery를 사용할 때 순수한 자바 스크립트 또는 jquery를 사용하면 거의 모든 기능을 jquery에서 사용할 수 있고 은보다 다양하고 사용하기 쉽습니다.