0

我有一个简单的 JS Junction,当我的响应式网站的断点被激活时停止工作(导航 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

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

4

3 回答 3

0

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

于 2013-11-09T14:59:54.167 回答
0

@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,您认为您可能会在断点处删除#bigImageid吗?.mainFoto > img或者也许 Bootstrap 可能正在重命名元素 ID?

于 2013-11-09T14:40:49.213 回答
0

可能这会对你有所帮助。

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

小提琴

于 2013-11-09T14:21:54.637 回答