Question

到目前为止，我仅使用HTML，CSS，js和Jquery，并且我没有尝试引入SQL或需要第三方软件的任何东西。现在，我有一个视频页面，我需要做的是构建一个系统，该系统将从视频页面中提取前2-3个视频，并将其显示在索引页面上的“新视频”部分下。

我不知道如何执行此操作，因此非常感谢您的帮助。

Answer 1

如果我理解正确，您希望从视频页面（前三个视频标题）中获取一些数据，并将其显示在索引页面上。

这是您在完成此任务时面临的挑战：

首先显示索引页面（因此，您无法从一个页面上“记住”以前显示的视频标题（通过将它们保存在localStorage中）并在另一页面上重新显示它们。 在这种情况下LocalStorage将无法工作
这三个视频标题将显示给网页的所有访问者，因此您无法将它们存储在本地计算机上-它们必须存储在服务器上。
HTML是一种标记语言，而不是编程语言，因此您不能将其用于if / else逻辑
javascript是一种基于浏览器的语言，仅在本地运行-因此它与服务器的交互极为受限。

尽管如此，js / jQuery确实有一个称为AJAX的东西，它允许您向服务器发送其他请求-包括jQuery $.load()方法，该方法允许您从服务器加载文件。进入当前页面。因此，您可以加载整个index.html页面并花费大量精力剥离不需要的内容，也可以将所有视频存储为单独的文件并使用.load()在视频页面和索引页面上都加载列表。

如果您的网络服务器允许PHP，而MOST则允许，那么另一个选择是将PHP添加到您的技能列表中。 PHP是一种驻留在服务器上的语言，例如HTML，但是具有HTML所缺乏的编程功能。 PHP可以创建HTML代码并将其注入到您的页面上-但只能在构建页面时这样做，而不能在页面呈现并显示给用户之后使用（为此，您将使用javascript）。

要使用PHP，您必须将所有页面从.html重命名为.php-它们将继续正常工作。实际上，您现在就可以对所有页面进行操作-试试吧。他们将工作相同。唯一的不同是，在以.php结尾的页面上，您可以在PHP-ON和PHP-OFF标记之间添加PHP代码，如下所示：

<?php
    include name_of_my_file.php;
?>

上面的PHP指令与jQuery $.load()指令具有几乎相同的功能-将名为name_of_my_file.php的文件的内容注入到该位置的渲染页面中。

使用PHP，您可以将视频列表存储在服务器all_videos.php上的单独文件中，并且在index.php和videos.php页面上都可以有读取这些文件的PHP部分并循环浏览标题，在字符串变量中创建HTML代码，然后您可以echo（PHP“写入屏幕”命令）到网页上所需的位置。

Answer 2

要使用jQuery选择视频页面上的前2-3个视频，请尝试以下操作：

//for the first 3: 
$('video info selector').slice( 0, 3 );
//for the first 2
$('video info selector').slice( 0, 2 );

然后，您可以使用jQuery的.each()方法循环选择内容，并提取索引页所需的视频信息。

对于仅JavaScript的方法，请使用querySelectorAll()来获取视频页面上的所有视频信息：

let videoInfo  = document.querySelectorAll("video info selector");

然后您可以像这样访问videoInfo中的前2-3个视频：

let vid1 = videoInfo[0];
let vid2 = videoInfo[2];
let vid3 = videoInfo[3];

然后可以从索引页面的节点中提取所需的任何信息。

一旦有了这些信息，就可以按照其他人的建议将其保存到localStorage中。有关本地存储的更多信息，请参见here。

对于您的情况，LocalStorage似乎是一种可行的方法，但是您应该意识到，鉴于您的情况，它确实有一些缺点：

如果您希望任何视频信息显示在索引页上，则此方法要求用户先访问您的视频页。
仅当用户再次访问您的视频页面时，索引页面上的信息才会更新。
localStorage中的项目不会自行过期，因此如果用户来离开一段时间（一个月，一个月，等），而无需先访问您的视频页面，他们可能会看到假设新视频定期添加到您的网站中，则信息已过时。

如下所述，'。load（）'可能看起来像。您将必须根据您特定的DOM结构更新代码：

$(function() {
  $('#video1').load('video.html .video-link1');
  $('#video2').load('video.html .video-link2');
  $('#video3').load('video.html .video-link3');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- video.html-->

<body>
    <div class="video-link1">
        <img src="videoscreenshot1">
        <span>Video Title1</span>
        <video src="video1"></video>
    </div>
    <div class="video-link2">
        <img src="videoscreenshot2">
        <span>Video Title2</span>
        <video src="video2"></video>
    </div>
    <div class="video-link3">
        <img src="videoscreenshot3">
        <span>Video Title3</span>
        <video src="video3"></video>
    </div>
    <div class="video-link4">
        <img src="videoscreenshot4">
        <span>Video Title4</span>
        <video src="video4"></video>
    </div>
    <div class="video-link5">
        <img src="videoscreenshot5">
        <span>Video Title5</span>
        <video src="video5"></video>
    </div>
</body>

<!-- index.html -->

<body>
	<div id="video1"></div>
	<div id="video2"></div>
	<div id="video3"></div>
</body>

Answer 3

使用本地存储概念，它将帮助您从一页读取数据到另一页

将数据从一页上的表拉到另一页上

3 个答案: