javascript - "Google like"图像预览按钮不起作用

标签 javascript jquery twitter-bootstrap

我在修改代码时遇到了一些麻烦。我正在研究这个"google like" image preview 。正如您所看到的,前三个图像预览工作正常。我需要第四张图片才能开始工作,因为我的 HTML 看起来像第四张图片,并且只有当用户单击图片“快速查看”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>

您能否帮助如何修改此代码来解决我的问题。如果您需要任何其他信息,请告诉我,我会提供

最佳答案

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

试试这个希望有帮助:)

关于javascript - "Google like"图像预览按钮不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36194459/

相关文章:

php - OneupUploaderBundle(blueimp),- 不允许使用方法

jquery - 如何获取 jQuery 选择器的文本表达式?

html - 如何使用 twitter bootstrap 减小 CSS 中的 div 大小?

html - 垂直对齐 Bootstrap 复选框

javascript - Angular js 在 Web 服务器上的部署问题

javascript - 为什么 jQuery 示例经常省略脚本类型?

javascript - 有没有办法用 Semantic-UI 获得动态图标?

javascript - 数字到 Word - jquery

javascript - 为什么我的 jQuery when().then() 函数会在 ajax 请求完成之前触发?

javascript - Bootstrap (4) 可以与 Angular Material (2) 一起集成吗?