javascript - 根据点击事件动态改变轮播图片

标签 javascript twitter-bootstrap

我有 3 个元素排成一行。我想在单击行中的列时显示轮播弹出窗口。问题是我无法根据选定的列元素更改 carousal 的图像。

这是我的完整代码:

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
      <style>
      .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {
        width: 70%;
        margin: auto;
      }
      </style>
    </head>
    <script>
    function process() {
    	var shops = JSON.parse('{ "id": "shopping", "categories": [ { "id": "Amazon", "name": "Amazon", "link": "https://images-na.ssl-images-amazon.com/images/G/01/SellerCentral/legal/amazon-logo_transparent._CB303899249_.png", "images": [ { "href": "https://images-na.ssl-images-amazon.com/images/G/01/credit/img16/CBCC/marketing/marketingpage/products._V524365396_.png" }, { "href": "http://static4.uk.businessinsider.com/image/575adbe2dd0895c4098b46ba/the-50-most-popular-products-on-amazon.jpg" } ] }, { "id": "Google", "name": "Google", "link": "http://pngimg.com/uploads/google/google_PNG19644.png", "images": [ { "href": "https://www.clipartmax.com/png/middle/147-1476512_google-google-products-logos-png.png" }, { "href": "https://xvp.akamaized.net/assets/illustrations/unblock-google/unblock-google-with-a-vpn-fc1e32f59d9c50bae315c2c8506a91e2.png" } ] }, { "id": "Apple", "name": "Apple", "link": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Apple_Logo.svg/2000px-Apple_Logo.svg.png", "images": [ { "href": "https://c.slashgear.com/wp-content/uploads/2018/03/apple-mfi-logos-update-2018-980x620.jpg" }, { "href": "https://support.apple.com/library/content/dam/edam/applecare/images/en_US/applemusic/itunes-apple-logo-apple-music-giftcard.jpg" } ] } ] }');
    	var row = 1;
    	var content = "";
    	shops = shops.categories;
    	for(var i=0; i< shops.length; i++) {
    		if(row == 1) {
    			content += '<div class="row">'
    		}
    		content += '<div class="col-md-4 col-sm-12" data-toggle="modal" onclick="processCarousel(shops[i])" data-target="#myModal">';
    		content += '<img style="border: 1px solid red" src="'+shops[i].link+'" width="100%" height="100%"/></div>';
    		if(row == 3) {
    			row = 0;
    			content += '</div>';
    		}	
    		row++;
    	}
    	document.getElementById("placeholder").innerHTML = content;
    	processCarousel();	
    }
    
    function processCarousel(input) {
    	alert(input);
    	var m = ['img_chania.jpg','img_chania2.jpg', 'img_flower.jpg','img_flower2.jpg'];
    	var carouselInner = document.getElementById("carousel-inner");
    	var carouselIndicators = document.getElementById("carousel-indicators");
    	var innerContent = "";
    	var indicatorsContent = "";
    	for(var i=0 ; i< m.length ; i++) {
    		var c = "";
    		if(i == 0) {
    			c = " active";
    		}
    		innerContent += '<div class="item'+c+'"><img src="'+m[i]+'"><div class="carousel-caption"></div>   </div>';
    		indicatorsContent += '<li class='+c+'data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>';
    	}
    	carouselInner.innerHTML = innerContent;
    	carouselIndicators.innerHTML = indicatorsContent;
    	var carouselExampleGeneric = document.getElementById("carousel-example-generic");
    	carouselExampleGeneric.carousel();
    }
    </script>
    </html>

以上代码生成以下输出:

enter image description here

单击任何图像时，它都会加载 carousal，但 carousal 的图像固定到我的数组元素 var m = ['img_chania.jpg','img_chania2.jpg', 'img_flower.jpg',' img_flower2.jpg']; 如我上面的代码所述。

但我只想显示我输入的 json shops.categories[selectedItem].images

中的选定图像

我尝试在列元素上使用 onclick javascript 事件，但代码无法识别它。执行此操作的正确方法是什么。

我想使用纯 javascript 来做到这一点。

最佳答案

首先，您需要摆脱对 processCarousel(); 的调用在第 39 行。

您的主要问题是，在您的内容变量内部，您传递的是参数变量的字符串而不是参数本身。试试这个:

content += '<div class="col-md-4 col-sm-12" data-toggle="modal" onclick="processCarousel(' + i + ')" data-target="#myModal">';

通过这种方式，您只需传递需要呈现的类别的索引。 然后，您还必须在 processCarousel 函数内提供 shops 对象，因此我将其向上移动到函数范围之外。

这将导致您的 processCarousel 函数内部出现更多问题。您必须像这样设置图像 var m = shops[i].images;而不是 var m = ['img_chania.jpg', 'img_chania2.jpg', 'img_flower.jpg', 'img_flower2.jpg'];

这将进一步引发另一个错误。 innerContent += '<div class="item' + c + '"><img src="' + m[i] + '"><div class="carousel-caption"></div> </div>';不管用。相反，您将不得不使用 m[i].href作为图片标签中的来源。

现在这会将配置传递给轮播，轮播将正常呈现。

您可能想考虑给变量命名并避免像“m”这样的变量。

var shops = JSON.parse('{ "id": "shopping", "categories": [ { "id": "Amazon", "name": "Amazon", "link": "https://images-na.ssl-images-amazon.com/images/G/01/SellerCentral/legal/amazon-logo_transparent._CB303899249_.png", "images": [ { "href": "https://images-na.ssl-images-amazon.com/images/G/01/credit/img16/CBCC/marketing/marketingpage/products._V524365396_.png" }, { "href": "http://static4.uk.businessinsider.com/image/575adbe2dd0895c4098b46ba/the-50-most-popular-products-on-amazon.jpg" } ] }, { "id": "Google", "name": "Google", "link": "http://pngimg.com/uploads/google/google_PNG19644.png", "images": [ { "href": "https://www.clipartmax.com/png/middle/147-1476512_google-google-products-logos-png.png" }, { "href": "https://xvp.akamaized.net/assets/illustrations/unblock-google/unblock-google-with-a-vpn-fc1e32f59d9c50bae315c2c8506a91e2.png" } ] }, { "id": "Apple", "name": "Apple", "link": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Apple_Logo.svg/2000px-Apple_Logo.svg.png", "images": [ { "href": "https://c.slashgear.com/wp-content/uploads/2018/03/apple-mfi-logos-update-2018-980x620.jpg" }, { "href": "https://support.apple.com/library/content/dam/edam/applecare/images/en_US/applemusic/itunes-apple-logo-apple-music-giftcard.jpg" } ] } ] }');
var row = 1;
var content = "";
shops = shops.categories;

function process() {
  for (var i = 0; i < shops.length; i++) {
    if (row == 1) {
      content += '<div class="row">'
    }
    content += '<div class="col-md-4 col-sm-12" data-toggle="modal" onclick="processCarousel(' + i + ')" data-target="#myModal">';
    content += '<img style="border: 1px solid red" src="' + shops[i].link + '" width="100%" height="100%"/></div>';
    if (row == 3) {
      row = 0;
      content += '</div>';
    }
    row++;
  }
  document.getElementById("placeholder").innerHTML = content;
}

function processCarousel(i) {
  //var m = ['img_chania.jpg', 'img_chania2.jpg', 'img_flower.jpg', 'img_flower2.jpg'];
  var m = shops[i].images;
  var carouselInner = document.getElementById("carousel-inner");
  var carouselIndicators = document.getElementById("carousel-indicators");
  var innerContent = "";
  var indicatorsContent = "";
  for (var i = 0; i < m.length; i++) {
    var c = "";
    if (i == 0) {
      c = " active";
    }
    innerContent += '<div class="item' + c + '"><img src="' + m[i].href + '"><div class="carousel-caption"></div>   </div>';
    indicatorsContent += '<li class=' + c + 'data-target="#carousel-example-generic" data-slide-to="' + i + '"></li>';
  }
  carouselInner.innerHTML = innerContent;
  carouselIndicators.innerHTML = indicatorsContent;
  var carouselExampleGeneric = document.getElementById("carousel-example-generic");
  //carouselExampleGeneric.carousel();
}

关于javascript - 根据点击事件动态改变轮播图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54047113/

上一篇：javascript - graphqljs - 如何搜索枚举类型

下一篇：javascript - 如何使用函数动态分配 d3.forceRadial 的中心？

相关文章：

javascript - Array.push 不是 Promise 内部的函数

JavaScript 长度属性(基本)

javascript - 拖放到表单内部

grails - FontAwesome 与 Grails <g :actionSubmit

javascript - Angular 如何获取动态创建的 div 的高度并将其发送到兄弟组件？

javascript - 当模态类处于事件状态时，Google map 会消失

javascript - 使用 php 运行 Javascript 代码

javascript - 编辑表单并在新表单中添加文本抛出 Angular js

javascript - 为什么在某些情况下组合 has() 和 gt() 不起作用？

twitter-bootstrap - ionic 网格系统

©2024 IT工具网  联系我们