jQuery div 标签代码答案

【问题标题】：JQuery Div Tag CodejQuery div 标签代码
【发布时间】：2018-02-20 01:13:25
【问题描述】：

解决这个任务。给出了CSS和html代码！但是添加 div 标签功能不起作用。 html页面移除后如何添加div标签？

编写以下代码：

a) 编写 CSS 类标题块：边框 1，颜色-蓝色，字体大小-20，字体名称-arial，内边距 50px。

b) 编写 CSS 类页脚块：边框 1，颜色-黑色，高度-20%，宽度-100%，背景颜色-灰色；

c) 为单击按钮时添加页眉块类和页脚块编写一个 jquery 代码。

d)为单击按钮时删除页眉块类和页脚块编写一个 jquery 代码。

e) 为单击按钮时的 Toggle Header 块 Class 和 Footer 块编写 jquery 代码。

$(document).ready(function() {
  $('.remove').click(function() {
    $('.header').remove();
    $('.footer').remove();
  });
});

$(document).ready(function() {
  $('.add').click(function() {
    $('body').addClass('div.header');
    $('body').addClass('div.footer');
  });
});

.header {
  border: 1px solid;
  color: blue;
  font-size: 20;
  font-family: arial;
  padding: 50px;
}

.footer {
  border: 1px solid;
  color: black;
  height: 20%;
  width: 100%;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link rel='stylesheet' style='text/css' href='a30.css'></link>
  <script src='../jquery.js'></script>
</head>

<body>
  <div class='header'>
    This is header!
  </div>
  <button class='add'>Add</button>
  <button class='remove'>Remove</button>
  <div class='footer'>
    This is footer!
  </div>

</body>

</html>

请帮我找到解决办法！

【问题讨论】：

一旦从 DOM 中删除，您需要完全重新创建丢失的 html。你可以将它保存在一个变量中，或者只在 Jquery 中使用 .show() 和 .hide()

标签： javascript jquery html css

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

jQuery 中的 remove() 函数会删除元素，因此您需要重新创建所有内容。如果要切换元素，最好使用隐藏和显示功能。

【讨论】：

【解决方案2】：

您的 JavaScript 不正确，您的代码将向 <body> 标记添加 2 个类，因此最终结果为：<body class="div.header div.footer">

相反，您需要将元素添加到正文中。

更新：

$(document).ready(function() {
  $('.add').click(function() {
    $('body').addClass('div.header');
    $('body').addClass('div.footer');
  });
});

到：

$(document).ready(function() {
  $('.add').click(function() {
    $('body').prepend('<div class="header"></div>');
    $('body').append('<div class="footer"></div>');
  });
});

$('body').prepend() 会将元素添加到提供的元素的开头 $('body').append() 会将元素添加到提供的元素的末尾

注意：因为被添加/添加的 div 是空的，所以它们将添加为空，如果需要，您可以在添加时在这些元素中添加更多的 html。

或者如上所述，您可以使用以下方法隐藏/显示页眉/页脚元素：

$(document).ready(function() {
  $('.remove').click(function() {
    $('.header, .footer').hide(); // hide footer and header divs
  });

  $('.add').click(function() {
    $('.header, .footer').show(); // show footer and header divs
  });
});

【讨论】：