Javascript 使用Bootstrap:JS函数在切换导航栏时停止工作

我有一个简单的JS连接，当我的响应网站的断点被激活时停止工作（导航变量切换/崩溃在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就会改变id=“bigImage”的SRC

---

为什么此功能停止工作以及如何修复它？

这可能会对您有所帮助

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>

---

@anilkumar，你认为在变量中存储

$（this）.find（'img'）.prop（'src'）.replace（'/Thumbs/'，'/fotoarticulos/'））

会让事情更容易让人理解吗？像这样：

$('.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？

谢谢大家的支持。问题是，当网站崩溃并响应时，有一个不可见的元素重叠在拇指图标上，这就是为什么它们没有响应，我想我混合引导太快了。再次感谢：）

样本将非常有用！你在哪里定义了这个函数？它需要是$（document）.ready（function（）{}）@Mutant，因为问题只在于使用引导程序，我不知道在没有引导程序库的情况下如何重现jsfiddle.net示例。该函数不需要在$（document）.ready（function（）{}）上定义，因为这只是一个独立的函数，它是通过onclick事件调用的（不管怎么说，我是按照你说的那样声明的，我得到了相同的行为），我看不出问题出在函数中，因为它在浏览器处于全视图时正常工作，问题看起来是在引导工具上，因为我只在网站在768pxAnil崩溃时才发现问题，这段代码的行为与我的相同，在768px上工作正常，但当视图端口在768px下崩溃时，JS代码停止工作，它甚至不显示警报消息。

 $('.foto').click(function() {
        $('#bigImage').attr('src', $(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);
})