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

Using Bootstrap: JS function stop working when nav bar is toggled

本文关键字：JS 停止工作 函数 导航      更新时间：2023-09-26

我有一个简单的JS联结，当我的响应式网站的断点被激活时，它停止工作（nav var在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"的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>

脚本

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

小提琴

谢谢大家的支持。问题是，当网站崩溃并获得响应时，有一个不可见的元素与 Thumbs 图标重叠，这就是他们没有响应的原因，我想我过早地混合了引导程序。再次感谢:)

>@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？

相关文章：