当使用javascript或jquery有多个具有相同类名的图像时，如何在另一个图像上单击显示图像？

我有一个带有缩略图的视频列表，它正在使用循环生成并制作播放列表

以下是jquery的代码

 var div = $('#div_thumbnails');
 div.html('');
 $('.cjtp-hp-video').each(function(i, video){ 
     var src = $(video).find('img').attr('src');
     var index = $(video).attr('data-index');
     var title = $(video).find('.cjtp-hp-title').text();
     var thumbnail = '<img class="thumbnail" src="'+src+'" data-index="'+index+'" data-title="'+title+'">';
     div.append(thumbnail);
 });

我正在使用jquery更改第一次单击图像时选择的图像样式，代码如下：

$(document).find('#div_thumbnails').on('click', 'img', function() {
    var css = { 'outline': '', 'outline-offset': '' };

    $('#div_thumbnails').find('img').not(this).css(css).animate({opacity: "0.3"}, 500);

    if (index != $(this).attr('data-index'))
        clicked=0;

    index = $(this).attr('data-index');
    clicked++;
    if (clicked === 1) {
        var title = $(this).attr('data-title');
        $('#span_thumbnails_title').html(title);
    } else if (clicked === 2) {
        core.playVideo(index);
        clicked = 0;
    }
});

---

现在，请告诉我如何使用jquery或javascript在所选图像上显示播放视频图标图像？

有很多解决方案。您可以尝试更改生成HTML的函数，方法是添加一个

div

，它将包装您的缩略图，然后在鼠标进入包装器时添加一个播放图标

我为您的案例实施了CSS解决方案：

var$wrappers=$（'.thumbnail_wrapper'）；
$wrappers.on（'click'，函数（）{
$wrappers.removeClass（'active'）；
$（this.addClass（'active'）；
});
.thumbnail\u包装器{
位置：相对位置；
}
.thumbnail\u wrapper.active:：after{
左边框：10px纯白；
边框顶部：10px实心透明；
边框底部：10px实心透明；
内容：“；
位置：绝对位置；
顶部：85px；
左：155px；
}

您希望准确显示哪个图标？它来自哪里？我想在存储在我的图像文件夹中的图像上显示traingle播放图标。@Armel你有什么解决方案吗？@Armel你能帮我解决这个问题吗？但我希望第一次点击这个播放按钮。我该怎么做？@FahadHassanSubzwari我添加了一小段JS，这样图标就会在点击时显示出来。但是我可以从哪里更改播放按钮图像的大小？在CSS中，检查
边框
大小。你能帮我解决这个[问题]（）？
#div_thumbnails {
    height: 110px;
    border-width: 2px 2px 0px 2px;
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

$(document).find('#div_thumbnails').on('click', 'img', function() {
    var css = { 'outline': '', 'outline-offset': '' };

    $('#div_thumbnails').find('img').not(this).css(css).animate({opacity: "0.3"}, 500);

    if (index != $(this).attr('data-index'))
        clicked=0;

    index = $(this).attr('data-index');
    clicked++;
    if (clicked === 1) {
        var title = $(this).attr('data-title');
        $('#span_thumbnails_title').html(title);
    } else if (clicked === 2) {
        core.playVideo(index);
        clicked = 0;
    }
});