如何在HTML div的innerHTML部分内添加按钮？

Question

我在JavaScript＆JQuery上是个新手，在html＆css上又有很多知识，但是我已经工作了好几天，然后把头撞到桌子上，无法解决。 也许有人可以帮助我，任何提示，建议将不胜感激！

我有以下HTML：

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

使用以下JavaScript和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"
        });
  });   
  });    

基本上我们有2个按钮（OPEN和CLOSE）。 首先打开图像和文本DIV，然后第二个关闭。 我想要做的是在图像下方（div内）添加另一个按钮，该按钮会将您重定向到特定页面。 我可以在HTML中的图像DIV中添加常规按钮，但是当它加载页面时，该按钮默认情况下会显示在页面上，尽管只有在单击第一个按钮（并打开innerHTML）时才应显示该按钮。 这意味着我必须以某种方式在JS中添加它。 如果我按下关闭并重置div，则仅当单击第一个OPEN按钮时，该按钮才应显示。 我不知道什么是JS脚本来防止首先加载按钮，而仅当我单击JS中的第一个按钮时才加载它。

任何帮助都是神圣的！ 先感谢您！

Answer 1

是的，存在冲突，因为您要覆盖javascript 和 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规范适当地更改语法，以简化和简化操作。 您可以自己做一个简单的练习。

PS：我已经更新了小提琴，使其包含了我刚才提到的更改，并且看起来工作正常。 同样，我知道Jquery语法不合适，但它是故意的。 无论如何，我希望它可以帮助您朝正确的方向开始。 此外，使用JavaScript和jQuery的时候，坚持一个无论是纯JavaScript或jQuery的，你几乎可以实现所有你需要她的jQuery的功能，它是更为灵活和易于使用。