javascript - 如何在 HTML div 的 innerHTML 部分中添加按钮？

Question

我对 JavaScript 和 JQuery 很陌生，对 html 和 css 更了解，但我有一些东西我已经研究了好几天了，我的头撞在 table 上但无法弄清楚。也许有人可以帮助我，任何提示、建议将不胜感激!

我有以下 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 个按钮(打开和关闭)。第一个打开图像和文本 DIV，第二个关闭。我想做的是在图像下方(在 div 内)添加另一个按钮，该按钮会将您重定向到特定页面。我可以在 HTML 中的图像 DIV 中添加一个常规按钮，但是当它加载页面时，默认情况下该按钮会出现在其上，尽管它应该仅在单击第一个按钮(并打开 insideHTML)时出现。这意味着我必须以某种方式在 JS 中添加它。如果我按下 close 并重置 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:我已经更新了fiddle合并我刚才提到的更改，它似乎运行良好。再说一次，我知道 Jquery 语法不合适，但它是故意的。不管怎样，我希望它能让你朝着正确的方向开始。另外，在使用 javascript 和 Jquery 时，请坚持使用纯 javascript 或 jquery，因为您可以在 jquery 中实现几乎所有您需要的功能，并且它更通用且易于使用。