根据点击事件动态更改轮播图片

时间：2019-01-04 22:37:43

标签： javascript twitter-bootstrap

我有3个元素连续排列。单击行中的列后，我想显示一个轮播弹出窗口。问题是我无法根据选定的列元素来更改旋转木马的图像。

这是我完整的代码：

 <!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

在单击任何图像时，它都在加载旋转木马，但是旋转木马的图像已固定到我上面的代码中提到的数组元素var m = ['img_chania.jpg','img_chania2.jpg', 'img_flower.jpg','img_flower2.jpg'];上。

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

中存在的所选图像

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

我想使用普通的javascript。

1 个答案:

答案 0 :(得分：1)

首先，您需要摆脱第39行对processCarousel();的呼叫。

您的主要问题是，您要在内容变量内部传递参数变量的字符串，而不是参数本身。请尝试以下方法：

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

这样，您只需传递需要呈现的类别的索引。 然后，您还必须在processCarousel函数内部也具有shop对象，因此我将其移到了函数范围之外。

这将导致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();
}
相关问题
最新问题