Question

我在修改代码时遇到了一些麻烦。我正在研究"google like" image preview。正如您所看到的，前三个图像预览工作正常。我需要第四个开始工作，因为我的HTML看起来像第4个图像和预览应该只在用户点击图像“快速查看”div时发生。

脚本

<script>
    // hide all
    $('.descriptions .panel').hide();
    // show first
    //$('#descriptions .panel').eq(0).show();
    // handle img click
    $('#grid img').click(function(){
        // get index of the img that was clicked
        var idx = $(this).parent().index();
        var row = $(this).parent().parent().next('.row');
        // remove special style from all others
        $('#grid img').removeClass('highlight');
        // add a special style to the clicked image
        $(this).addClass('highlight');
        // hide all others
        $('.descriptions .panel').hide();
        // show desc for clicked img
        row.find('.descriptions .panel').eq(idx).show("slow","swing");
    });
</script>

是否可以帮助您修改此代码以解决我的问题。如果您需要任何其他信息，请告诉我，我将提供

Answer 1

// hide all
$('.descriptions .panel').hide();
// handle img click
$('.col-md-3').click(function(){
// get index of the img that was clicked
var idx = $(this).index();

var row = $(this).parent().next('.row');
// remove special style from all others
$('#grid img').removeClass('highlight');
// add a special style to the clicked image
$(this).find('img').addClass('highlight');
// hide all others
$('.descriptions .panel').hide();
// show desc for clicked img
row.find('.descriptions .panel').eq(idx).show();
});

尝试这个希望有帮助：）

“Google like”图片预览按钮不起作用

1 个答案: