Question

我只是拿起JS＆amp; jQuery并认为自己非常有能力使用HTML / CSS。我正在建立一个单页前端唯一的网站。我已经使用Bootstrap确定了布局，现在我只想弄清楚一些功能。我的方案如下：

4个String request = ""; byte[] requestByteArr; //read the complete request while(true){ String requestLine = bufferedReaderFromClient.readLine() + "\r\n"; if (requestLine.trim().length()==0 && !request.equals("")){ request+=requestLine; requestByteArr = request.getBytes(); System.out.println(request); break; } else { request+=requestLine; } } String hostname = getHostFromRequest(request); int remoteport = getRemotePortFromRequest(request); if (request.startsWith("CONNECT")){ //establish connection between host and proxy final Socket hostSocket = new Socket(hostname, remoteport); //tell client that connection was successful String statusLine = "HTTP/1.1 200 Connection established \n" + "Proxy-agent: ProxyServer/1.0\n" + "\r\n"; outToClient.write(statusLine.getBytes()); outToClient.flush(); //new thread to handle incoming responses from host new Thread(){ public void run(){ try{ InputStream inFromHost = hostSocket.getInputStream(); while(true){ byte[] bufread = new byte[128]; int bytes_received; while ((bytes_received = inFromHost.read(bufread)) > 0){ outToClient.write(bufread, 0, bytes_received); outToClient.flush(); } } } catch (IOException e){ e.printStackTrace(); } } }.start(); //main thread handles incoming requests from client OutputStream outToHost = hostSocket.getOutputStream(); while (true){ byte[] bufread = new byte[128]; int bytes_received; while ((bytes_received = inFromClient.read(bufread)) > 0){ outToHost.write(bufread, 0, bytes_received); outToHost.flush(); } } }中有4个<div>个文字和一个图像;并且下方有<div>个<div>个等级。每个#content div都有.on('click')个侦听器，当用户点击特定div时，#c1-4 div会相应更改。

#content

默认情况下，会选择<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">  </div>。进入#c1 <div>的内容主要是文字，但也有一些图标和图片，并带有适当的样式。

问题：存储和保存的最佳方式是什么？将内容加载到#content div中？根据我的知识到目前为止，我相信选项是：

将其硬编码到JS中并使用#content设置内容;虽然这会为JS添加相当多的HTML。
对与4个.html() ID中的每一个相关的4个不同div进行硬编码，并相应地使用#c和.show()。
使用.hide()加载其他HTML文档中的内容。但是，我不确定如何处理样式以及这将如何影响.load() div的显示。

我还想知道上述每种方法的优缺点，哪一种更适合未来的维护（例如，添加第五个，第六个#content编号的div来选择和加载内容）。

Answer 1

在现实世界中，开发人员会根据用户的点击次数来考虑后端数据来替换/追加内容，而第二件事就是你如何追加/添加/ html或将内容加载到div元素。不知道你将如何根据点击的按钮硬编码不同的内容，我认为在你的情况下＃2＆amp; ＃3应该做的伎俩。你可以使用附加/前置动作（我猜它们是不言自明的，但在某些情况下可能有用）。正如我最初在理想工作中提到的那样，您将对后端端点（数据库，API等）进行查询，并从那里获取内容。完成后，您只需使用那些div和css（内联或CSS表）进行相应的样式设置。专注于整体建设！

Answer 2

有很多方法可以做到这一点，并且很多JS框架都以不同的方式完成，但是我认为所有选项都是合适的，特别是考虑到你使用的是jQuery。我只想谈谈你的三个选择：

您可以将其硬编码到JS中，但您也可以将内容放在HTML中的<script>标记中，并将其作为JavaScript字符串加载到jQuery中，就像它们对Underscore模板一样。
```
<script type="text/template" id="div-1">
    <span>Hey, this is some content</span>
</script>
```
稍后在您的JavaScript中，只需执行$('#div-1').html()即可获取其中的内容，您可以将其添加到内容div中。
此选项也完全可以接受。
只要您已将所有css应用于文档，动态更改DOM将不会影响其应用样式的能力。只需确保已在已加载的样式表中包含所有规则。

Answer 3

扩展我的评论，以下是使用隐藏内容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>

带有jQuery的单页网站 - JS或HTML内容

3 个答案: