使用Bootstrap：导航栏切换时，JS功能停止工作

Question

我有一个简单的JS Junction，当激活响应式网站的断点时，该JS Junction停止工作（导航变量切换/折叠为768px，这是JS函数停止工作的时候）

HTML是：

<div class="mainFoto">
   <img id="bigImage" src="/fotosArticulos/12578.jpg">
</div>
<div class="misProductosFotos">
   <div class="foto" onclick="callImage('12578.jpg');"><img src="/Thumbs/12578.jpg"></div>
   <div class="foto" onclick="callImage('30643.jpg');"><img src="/Thumbs/30643.jpg"></div>
   <div class="foto" onclick="callImage('12656.jpg');"><img src="/Thumb/12656.jpg"></div> 
</div>

并且JS函数是

function callImage(idImage) {
var imageUrl = '/fotosArticulos/'+idImage;
$('#bigImage').attr('src', imageUrl);
}

这个简单的操作是，当用一只手点击JS时，JS会更改id =“ bigImage”的SRC

为什么此功能停止工作以及如何解决？

Answer 1

可能会对您有帮助。

的HTML

<div class="mainFoto">
    <img id="bigImage" src="/fotosArticulos/12578.jpg" />
</div>
<div class="misProductosFotos">
    <div class="foto">
        <img src="/Thumbs/12578.jpg" />
    </div>
    <div class="foto">
        <img src="/Thumbs/30643.jpg" />
    </div>
    <div class="foto">
        <img src="/Thumbs/12656.jpg" />
    </div>
</div>

脚本

 $('.foto').click(function() {
        $('#bigImage').attr('src', $(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/'));
    })

小提琴

Answer 2

@anilkumar，您是否认为将$(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/')在变量中可能会使事情变得更人性化可读吗？ 像这样：

$('.foto').on('click', function() {
var changeSrc = $(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/');
$('#bigImage').attr('src', changeSrc);
})

@saymon，您是否认为您可能正在从断点的.mainFoto > img中删除#bigImage id？ 还是Bootstrap可能正在重命名元素ID？

Answer 3

谢谢你们的支持。 问题是，当网站崩溃并响应时，有一个不可见的元素与Thumbs图标重叠，这就是为什么它们没有响应的原因，我认为我过早地合并了引导程序。 再次感谢 ：）