javascript - 需要修改 javascript 代码以在循环中运行不同的生成函数
问题描述
来自“ https://www.w3schools.com/howto/howto_js_slideshow.asp ”的修改:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName('mySlides');
var dots = document.getElementsByClassName('dot');
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(' active', '');
}
slides[slideIndex-1].style.display = 'block';
dots[slideIndex-1].className += ' active';
}
我从 php 调用这些函数,如下所示:
for($j=0; $j < 2; $j++) {
for($i=0; $i < 10; $i++) {
echo "<div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>";
}
}
我想将上面的代码修改为下面对我不起作用的代码:
for($j=0; $j < 2; $j++) {
for($i=0; $i < 10; $i++) {
echo "<div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides_".$i."(-1)">❮</a>
<a class="next" onclick="plusSlides_".$i."(1)">❯</a>
</div>";
}
}
我想要 2 个单独的滑块,每个滑块有 10 个图像,并且两个滑块都有单独的控件。
我怎样才能使上面的代码工作?我应该修改什么?
我尝试使用以下调用函数:
window["plusSlides".concat("_",$i)](slideIndex);
以及以下定义函数:
window["plusSlides".concat("_",$i)] = function(n) {}
和 eval 函数,但这些对我不起作用。
解决方案
提议
与其改变你的后端代码,不如直接改变你的前端代码?在我看来,它要简单得多,更不用说它可能更容易全面。
其次,你为什么不做一些函数来产生一个滑块而不是使用一个循环呢?我只是在想,这肯定是更容易的选择吗?一个例子:
编辑 1
请记住,我并不是说您应该使用这个特定的 PHP 代码,我只是提供了一个示例,说明从长远来看,您可以做些什么来让您的生活更轻松。PS我已经在运行中编写了这个PHP代码,所以我不知道它是否有效,它更像是伪代码而不是正式的解决方案。
编辑 2
这只是一个简单的更新,其中包含我为图像数组考虑的数据结构。请记住,我没有尝试或测试过这段代码,这是比其他任何东西都多的伪代码,这只是为了帮助您解决您的解决方案。
<?php
// This is just a POPO - Plain old php object.
// Aka a data/value object.
class Image {
public $src;
public $caption;
public $index;
function __construct ($src, $caption, $index) {
$this->src = $src;
$this->caption = $caption;
$this->index = $index;
}
}
// How you do this is up to you, but this is an EXAMPLE...
$imageArray1 = array(
new Image('../image.png', 'This is an awesome image', '1/10')
);
?>
然后这是我在这个答案中写的原始代码......
<?php
function slideshow (images) {
ob_start();
<div class="slideshow-container">
<?php foreach ($images as $image) : ?>
<div class="mySlides fade">
<div class="numbertext"><?php echo $image->index ?></div>
<img src="<?php echo $image->src?>" style="width:100%">
<div class="text"><?php echo $image->caption ?></div>
</div>
<?php endforeach; ?>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
return ob_get_clean();
}
echo slideshow($imageArray1);
echo slideshow($imageArray2);
?>
另外,作为旁注,看看你想要实现什么以及你目前正在实施什么,你的方法完全不可行?当然,使用类 name 生成许多元素会更有意义slideshow-container
。从降价的角度来看,这不仅看起来更合乎逻辑,而且还意味着您的 JavaScript 可以用它做更多的事情。举个例子,这是我关于如何编写 JavaScript 的想法,而不是在服务器端创建许多 JavaScript 函数,只是让它更通用和灵活,更容易吗?
如您所见,使用此解决方案,您只需拥有两个 JavaScript 函数,而不是许多 JavaScript 函数,start
而且slideshow
,它并不复杂、简单且灵活。另外,如果您想在以后添加更多幻灯片,我认为这种方法会更易于管理和维护。
const slideshow = (el) => {
let slideIndex = 1;
const plusSlides = n => showSlides(slideIndex += n);
const currentSlide = n => showSlides(slideIndex = n);
function showSlides(n) {
const slides = el.querySelectorAll('.mySlides');
if (n > slides.length) slideIndex = 1;
else if (n < 1) slideIndex = slides.length;
for (let i = 0; i < slides.length; i++) slides[i].style.display = 'none';
slides[slideIndex - 1].style.display = 'block';
}
showSlides(slideIndex);
el.querySelectorAll(".prev").forEach(i => {
i.addEventListener('click', x => plusSlides(-1));
});
el.querySelectorAll(".next").forEach(i => {
i.addEventListener('click', x => plusSlides(1));
});
};
const start = () => {
document.querySelectorAll(".slideshow-container").forEach(el => slideshow(el));
};
setTimeout(start, 250); // A super lazy implementation of document ready...
/*
NO CHANGES HAVE BEEN MADE HERE...
*/
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!-- First slideshow -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<br>
<!-- Just to show where the code splits. -->
<hr>
<!-- Second slideshow. -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<br>
推荐阅读
- msbuild - MsBuild 条件 ProjectReferences 不会影响传递引用?
- iis - ServiceStack.Redis 无法连接:sPort:0,在 Windows 服务器中的 IIS 上部署时
- git - 如何在 git repo 中隐藏文件夹
- python - 如何在 map(func, iter) 中动态定义“func”和“iter”?
- c - sscanf 返回 1 读取字符串
- hyperledger-fabric - 无法在 IBM Starter Plan 中升级自定义 BNA
- php - PHP比较两个日期数组并检查匹配
- linux - 用于每 8 小时删除一次文件夹的子文件夹的 Cron 作业命令
- sqlite - 什么时候应该在 sqlite 中使用数据类型 REAL 和 NUMERIC?
- liferay-6 - 在 Java/JEE 中调试多个 Web 项目