javascript - 在同一个列表上使用多个灯箱会导致问题-6ren

javascript - 在同一个列表上使用多个灯箱会导致问题

转载作者：行者123 更新时间：2023-11-28 00:34:59

// Open the Modal
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

// Close the Modal
function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

/*Main list*/
#list ul{width:100%; height:100%; border-radius:0px;  list-style-type:none; margin:5% 0% 0% 0%; overflow:hidden; padding:0% 0% 4% 0%; background:rgba(240,240,240,1);}
#list li{box-shadow:0px 10px 10px 0px rgba(0,0,0,0.2); transition:0.1s; border-radius:0px 0px 10px 10px; border:2px solid black; color:black; background:rgba(255,255,255,1); width:70%; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:0.9vw; margin:0% 0% 5% 0%; overflow:hidden; word-wrap:break-all; word-break:break-word; padding:0% 0% 0% 0%; float:left; text-align:center; line-height:1.2; }

.row > .column {
 Padding:0%; margin:0;
  width:30%; height:auto; float:left;
}

.column img{width:95%; height:auto; margin:0% 0% 0% 0%; float:left;}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-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);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}


.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<div id="list">
<ul>
<li>
 <!-- Images used to open the lightbox -->
<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
  </div>
  Some text
</div>

<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
    </div>

    <!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

  </div>
</div> 
</li>

<li>
 <!-- Images used to open the lightbox -->
<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
  </div>
  Some text
</div>

<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    </div>

    <!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>



   
  </div>
</div> 
</li>
</ul>
</div>

我有一个包含多个 li 的 ul，每个 li 都有一个主图像。一旦用户单击图像，就会为用户打开一个灯箱。我已经实现了在 W3C Schools 上找到的示例，它运行良好。除了一件重要的事情:当我点击第二里的图片时，它会显示第一里的内容。如何在不更改 id/class 的情况下分离大量列表项的内容？

最佳答案

您使用的示例是为一个 slider 制作的。当您尝试复制时，您复制了您不应该做的元素 ID“myModal”。 ID 应该是唯一的。

同样，javascript 函数被编写为作用于具有该 ID 的一个模态。因此，解决此问题的一种方法是重新编写函数以传递模态 ID。这样函数就可以操纵正确的 slider 。这是一个例子:

 // Open the Modal
function openModal(id) {
  document.getElementById(id).style.display = "block";
}

// Close the Modal
function closeModal(id) {
  document.getElementById(id).style.display = "none";
}

var slideIndex = 1;
showSlides('myModal', slideIndex);
showSlides('myModal2', slideIndex);

// Next/previous controls
function plusSlides(id, n) {
  showSlides(id, slideIndex += n);
}

// Thumbnail image controls
function currentSlide(id, n) {
  showSlides(id, slideIndex = n);
}

function showSlides(id, n) {
  var i;
  var modalDiv = document.getElementById(id);
  var slides = modalDiv.getElementsByClassName("mySlides");
/*   var dots = modalDiv.getElementsByClassName("demo"); */
  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"; */
}

/*Main list*/
#list ul{width:100%; height:100%; border-radius:0px;  list-style-type:none; margin:5% 0% 0% 0%; overflow:hidden; padding:0% 0% 4% 0%; background:rgba(240,240,240,1);}
#list li{box-shadow:0px 10px 10px 0px rgba(0,0,0,0.2); transition:0.1s; border-radius:0px 0px 10px 10px; border:2px solid black; color:black; background:rgba(255,255,255,1); width:70%; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:0.9vw; margin:0% 0% 5% 0%; overflow:hidden; word-wrap:break-all; word-break:break-word; padding:0% 0% 0% 0%; float:left; text-align:center; line-height:1.2; }

.row > .column {
 Padding:0%; margin:0;
  width:30%; height:auto; float:left;
}

.column img{width:95%; height:auto; margin:0% 0% 0% 0%; float:left;}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-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);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}


.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<div id="list">
<ul>
<li>
 <!-- Images used to open the lightbox -->
<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" onclick="openModal('myModal');currentSlide('myModal',1)" class="hover-shadow">
  </div>
  Some text
</div>

<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal('myModal')">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
    </div>

    <!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides('myModal',-1)">&#10094;</a>
    <a class="next" onclick="plusSlides('myModal',1)">&#10095;</a>

  </div>
</div> 
</li>

<li>
 <!-- Images used to open the lightbox -->
<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" onclick="openModal('myModal2');currentSlide('myModal',1)" class="hover-shadow">
  </div>
  Some text
</div>

<!-- The Modal/Lightbox -->
<div id="myModal2" class="modal">
  <span class="close cursor" onclick="closeModal('myModal2')">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    </div>

    <!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides('myModal2',-1)">&#10094;</a>
    <a class="next" onclick="plusSlides('myModal2',1)">&#10095;</a>



   
  </div>
</div> 
</li>
</ul>
</div>
 
 <script>

</script>

关于javascript - 在同一个列表上使用多个灯箱会导致问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54221667/

文章推荐： html - 图像和视频作为具有相同比例的响应元素

文章推荐： HTML CSS 图像库不能用自动或拉伸(stretch)制作正方形

文章推荐： c++ - Boost TCP async_receive_some 不会第二次读取

文章推荐： javascript - JQuery 在 Wordpress 中打破特定的 div 标签

javascript - 使用 WebScriptEndpoint 使用 javascript 使用 WCF 服务
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务，尤其是 WebScriptEndpoint。任何人都可以对此给出任何指导吗？谢谢最佳答案这是一篇关于
c - 没有结果!!使用 fork() 使用 dup2 使用 2 个管道运行 execlp()
我正在编写一个将运行 Linux 命令的 C 程序，例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
python - 处理文件上传，使用 Pillow 调整大小，使用 SQLAlchemy 存储，使用 Flask 提供文件
所以我正在尝试处理文件上传，然后将该文件作为二进制文件存储到数据库中。在我存储它之后，我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库，因为我使用 Google 应用引
excel - 使用 IF 使用 VBA 在单元格中添加公式的问题
我正在尝试制作一个宏，将下面的公式添加到单元格中，然后将其拖到整个列中并在 H 列中复制相同的公式我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
使用 OperatorPrecedenceParser 使用 FParsec 解析函数应用程序？
问题类似于this one ，但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
sql - 使用 sequelize 使用 where 查询编码计数
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
bash - 使用 “let”分配Bash失败，使用 “/”
我正在使用GNU bash，版本5.0.3(1)-发行版(x86_64-pc-linux-gnu)，我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
javascript - 使用 JavaScript 使用 FOR OF 数组循环时出现错误？
这里，为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时，它发现错误。而且我的 jquery 类和 insertadjacentHTMl 也不
javascript - 使用 javascript 使用 for 属性更改表单标签内容
我正在尝试更改标签的innerHTML。我无权访问该表单，因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。这是输入和标签的结构:
javascript - 使用 jquery 使用 .on() 将事件附加到页面上的动态插入按钮
我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除按钮。问题是 Delete 按钮在新插入的元素上不起作用，
使用 awk 使用 sha1sum 进行散列
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列，它是一个数字，如帐号，并按原样返回其余列。使用 awk 或 sed 执行此操作的最佳方法是什么？ Accounti
mysql - 使用 insert into 使用 mysql
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中，我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
jquery - 将输入字段值修剪为仅字母数字字符/使用 .使用 jQuery
所以我试图有一个输入字段，我可以在其中输入任何字符，但然后将输入的值小写，删除任何非字母数字字符，留下“。”而不是空格。例如，如果我输入: 地球的 70% 是水，-!*#$^^ & 30% 土地输
javascript - 使用 .innerHTML 使用 DOM
我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。这是一个获取输入值、检查选择
php - 使用 angularjs 使用 where 子句从数据库获取数据
我想使用 angularjs 从 mysql 数据库加载数据。这就是应用程序的工作原理；用户登录，他们的用户名存储在 cookie 中。该用户名显示在主页上我想获取这个值并通过 angularjs
ios - 使用 UITableViewCell 使用 AutoLayout
我正在使用 autoLayout，我想在 UITableViewCell 上放置一个 UIlabel，它应该始终位于单元格的右侧和右侧的中心。这就是我想要实现的目标所以在这里你可以看到我正在谈论的
mysql - 使用 ElasticSearch 使用 or 和运算符搜索多个字段
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
ios - 使用 Swift 使用 JSON
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
javascript - 使用 JavaScript 使用 for 循环声明变量
我尝试使用for循环声明变量，然后测试cols和rols是否相同。如果是，它将运行递归函数。但是，我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗？现在，在比较 col.1 和
jquery - 使用 :after 使用 jquery 更改样式
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在同一个列表上使用多个灯箱会导致问题