0

レスポンシブ Web サイトのブレークポイントがアクティブになると動作を停止する単純な JS ジャンクションがあります (768px で nav var トグル/折りたたみ、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

これはあなたを助けるかもしれません。

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 に答える
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 に答える