单页网站与jQuery -内容在JS或HTML

Single page website with jQuery - Content in JS or HTML

本文关键字：JS HTML 网站 jQuery 单页      更新时间：2023-09-26

我只是拿起JS & &;jQuery，并认为自己很擅长HTML/CSS。我在建设一个单页前端只网站的中间。我已经用Bootstrap确定了布局，现在我只是想弄清楚一些功能。我的场景如下:

有4个<div>，每个<div>都有文字和图像;下面是#content级的<div>。每个#c1-4div都有一个.on('click')侦听器，当用户单击特定的div时，#contentdiv将相应地更改。

<div id="#c1" class="active-div">
    <p>Text Here</p>
    <img src="image.jpg">
</div>
<div id="#c2">
    <p>Text 2 Here</p>
    <img src="image2.jpg">
</div>
<div id="#c3">
    <p>Text 3 Here</p>
    <img src="image3.jpg">
</div>
<div id="#c4">
    <p>Text 4 Here</p>
    <img src="image4.jpg">
</div>
<div id="#content">
    <!-- Content of the selected div goes here -->
</div>

默认选择"#c1 <div>"。#content的内容主要是文字，但也有一些图标和图像，有适当的样式。

问题:存储& &;加载内容到#contentdiv?根据我目前的知识，我认为选项是:

  1. 硬编码到JS中，使用.html()设置内容;虽然这会在JS中添加相当多的HTML。

  2. 硬编码4个与#c id相关的不同div，并相应使用.show()和.hide()。

  3. 使用.load()从另一个HTML文档加载内容。但是，我不确定如何处理样式以及这将如何影响#contentdiv的显示。

我还想知道上述每种方法的优缺点，以及哪一种更适合未来的维护(例如，添加第五个，第六个#c编号的div来选择&

在现实世界中，开发人员考虑后端数据根据用户的点击来替换/追加内容，如何准确地追加/prepend/html或将内容加载到div元素中只是第二件事。不确定你将如何根据点击按钮硬编码不同的内容，我认为在你的情况#2 应该能解决问题。您可以使用追加/预追加操作(我猜它们是不言自明的，但在某些情况下可能很有用)。正如我最初在理想工作中提到的，您将对后端端点(数据库，API等)进行查询，并从那里获取内容。一旦完成，您只需使用这些div和css(无论是内联或css表)的东西相应地样式。注重整体建设!

有很多方法可以做到这一点，并且有很多JS框架可以以不同的方式做到这一点，但在我看来，所有的选择都是合适的，特别是考虑到您正在使用jQuery。我只讲一下你的三个选项:

  1. 你可以硬编码到你的JS中，但你也可以将内容放在HTML的<script>标签中，并将其作为jQuery中的JavaScript字符串加载，就像他们对Underscore模板所做的那样。

    <script type="text/template" id="div-1">
    <span>Hey, this is some content</span>
</script>

    然后在你的JavaScript中，只需执行$('#div-1').html()来获取它的内容，并且你可以将其粘贴到你的内容div中。

  2. 这个选项也完全可以接受。
  3. 只要你已经将所有的css应用到文档中，动态更改DOM不会影响其应用样式的能力。只要确保你已经在样式表中加载了所有的规则。

扩展我的评论，这里是如何使用隐藏内容div和使用。html()替换html 

$(function() {
  var content = $('.active-div .content').html();
  $('#content').html(content);
  $('.item').click(function() {
    $('.item').removeClass('active-div');
    $(this).addClass('active-div');
    content = $('.active-div .content').html();
    $('#content').html(content);
  });
});
.item {
  cursor: pointer;
  display:inline-block;
  padding-right:10px;
}
.content {
  display: none;
}
#content {
  background: #000;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active-div" id="#c1">
  <p>Text Here</p>
  <img src="image.jpg">
  <div class="content">Sample content 1</div>
</div>
<div class="item" id="#c2">
  <p>Text 2 Here</p>
  <img src="image2.jpg">
  <div class="content">Sample content 2</div>
</div>
<div class="item" id="#c3">
  <p>Text 3 Here</p>
  <img src="image3.jpg">
  <div class="content">Sample content 3</div>
</div>
<div class="item" id="#c4">
  <p>Text 4 Here</p>
  <img src="image4.jpg">
  <div class="content">Sample content 4</div>
</div>
<div id="content">
  <!-- Content of the selected div goes here -->
</div>

相关文章：