HTML设置轮播图像src，当它处于活动状态时

Question

我基本上在一页中设置了两个轮播。

我希望能够从第二个轮播项目 src onclick 更改第一个轮播项目活动 src。

我做的是

我的第二个轮播项目如下所示：

<div style="max-width: 20%; max-height: 20%;" class="col-sm-3">
<img style=" margin-left:100%;border-radius: 8px; height:100px;" src="{{column}}" onclick="setMainImage('{{image}}')" class="img-responsive" alt="test1">

我的第一个轮播项目需要根据我的第二个轮播点击项目进行更改。

<div style="max-width: 100%; max-height: 100%;" class="item{% if loop.index == 1 %} active{% endif %}">
<center>  
<img style="margin:auto;height:400px;" src="{{item}}" id="main_image" class="img-responsive" alt="test1">

<script>
    function setMainImage(img) {            
        console.log(img)
        console.log($('#main_image').attr('src', img)); 
    }
</script>

当我执行 setMainImage 时，该功能正常工作，并且 console.log 为我提供了正确的图像。我想将该图像设置为我的第一个轮播 .item 活动 .img src 属性。

Answer 1

我想您正在渲染多个轮播项目并使用 active 类标记您希望由 JS 函数更改的项目。

如果这是真的，您在渲染轮播项目内的不同图像时遇到问题，您正在为所有这些项目分配 main_image id。

这样，当您调用 jquery $('#main_image').attr 函数时，它不知道需要更改的元素是什么，因为 id main_image 不是唯一的。

当您在选择循环迭代时，您可以只渲染id='main_image'，就像您对active 类所做的那样：

<center><img style="margin:auto;height:400px;" src="{{item}}"{% if loop.index == 1 %} id="main_image"{% endif %} class="img-responsive" alt="test1">

或者您可以使您的 JQuery 选择器更加具体，选择 main_image 下的 active 类：

$('.active #main_image').attr('src', img);