Javascript 基于单击事件动态更改旋转木马图像

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

这是我的完整代码：

引导示例
.carousel-inner>.item>img，
.carousel-inner>.item>a>img{
宽度：70%；
保证金：自动；
}
函数过程（）{
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“，”图像“：[{“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”：“谷歌”，“名称”：“谷歌”，“链接”：http://pngimg.com/uploads/google/google_PNG19644.png“，”图像“：[{”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:”苹果“，”名称“：”苹果“，”链接“：”https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Apple_Logo.svg/2000px-Apple_Logo.svg.png“，”图像“：[{”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行=1；
var-content=“”；
商店=商店。类别；
对于（变量i=0；i”；
}
carouseliner.innerHTML=innerContent；
carouselIndicators.innerHTML=指示符内容；
var carouselExampleGeneric=document.getElementById（“carousel-example-generic”）；
carouselExampleGeneric.carousel（）；
}

首先，您需要取消对第39行中的

processCarousel（）；

的调用

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

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

---

谢谢，为什么我们需要注释这行-

carouseSampleGeneric.carousel（）；

我不知道你想用这段代码做什么，但我认为它给我带来了一个错误，所以我暂时注释掉了它，以便让其他一切都正常工作。。

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();
}