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

【问题标题】：Using Bootstrap: JS function stop working when nav bar is toggled使用 Bootstrap：切换导航栏时 JS 功能停止工作
【发布时间】：2013-11-09 14:09:51
【问题描述】：

我有一个简单的 JS 连接，当我的响应式网站的断点被激活时停止工作（导航 var 切换/折叠在 768 像素，这是 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

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

【问题讨论】：

jsfiddle.net 示例会很有帮助！你在哪里定义了函数？它需要是 $(document).ready(function(){})
@Mutant 因为问题只是使用引导程序，所以我看不到如何在没有引导程序库的情况下重现 jsfiddle.net 示例。该函数不需要在 $(document).ready(function(){}) 上定义，因为这只是一个独立的函数，它是通过 onclick 事件调用的（无论如何我如你所说的那样声明，我得到相同的行为）我看不出问题出在功能上，因为当浏览器处于全视图时它可以正常工作，问题看起来是在引导工具上，因为我只有在网站在 768px

标签： javascript jquery twitter-bootstrap navbar

【解决方案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

【讨论】：

Anil，这段代码的行为和我的一样，在 768px 以上工作正常，但是当视口在 768px 下崩溃时，JS 代码停止工作，它甚至不显示警报消息。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：