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

Question

我有一个简单的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会更改id="bigImage“的源码。

为什么这个函数停止工作?如何修复它？

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/'));
    })

fiddle

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

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