Question

我有一个简单的JS Junction，当我的响应式网站的断点被激活时停止工作（nav var toggle / collapse at 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 =＆＃34; bigImage＆＃34;

的SRC

为什么此功能停止工作以及如何解决？

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

Answer 3

感谢各位的支持。问题是，当网站崩溃并获得响应时，有一个看不见的元素与Thumbs图标重叠，这就是为什么他们没有回应，我想我很快就混合了bootstrap。再次感谢：）

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

3 个答案: