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

Question

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

这里是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);
 });

这个循环正在制作这个 HTML：

<div class="div_thumbnails">
   <img class="thumbnail" src="https://i.ytimg.com/vi/YHLZitYYyIg/mqdefault.jpg" data-index="0" data-title="Vsauce enters The Create Unknown – Vsauce2 po..." style="opacity: 1;outline: white solid 3px;outline-offset: -3px;">
   <img class="thumbnail" src="https://i.ytimg.com/vi/YHLZitYYyIg/mqdefault.jpg" data-index="1" data-title="Vsauce enters The Create Unknown – Vsauce2 po..." style="opacity: 1;outline: white solid 3px;outline-offset: -3px;">
   <img class="thumbnail" src="https://i.ytimg.com/vi/YHLZitYYyIg/mqdefault.jpg" data-index="2" data-title="Vsauce enters The Create Unknown – Vsauce2 po..." style="opacity: 1;outline: white solid 3px;outline-offset: -3px;">
   <img class="thumbnail" src="https://i.ytimg.com/vi/YHLZitYYyIg/mqdefault.jpg" data-index="3" data-title="Vsauce enters The Create Unknown – Vsauce2 po..." style="opacity: 1;outline: white solid 3px;outline-offset: -3px;">
</div>

这是 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;
}

我正在使用 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 在所选图像上显示播放视频图标图像？

Answer 1

有很多解决方案。您可以尝试通过添加 div 来更改生成 HTML 的函数，该函数将包装您的缩略图，然后在鼠标进入包装器时添加一个播放图标。

我为您的案例实现了一个 CSS 解决方案：

var $wrappers = $('.thumbnail_wrapper');

$wrappers.on('click', function () {
  $wrappers.removeClass('active');
  $(this).addClass('active');
});

.thumbnail_wrapper {
  position: relative;
}

.thumbnail_wrapper.active::after {
  border-left: 10px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  content: "";
  position: absolute;
  top: 85px;
  left: 155px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div_thumbnails">
  <div class="thumbnail_wrapper">
    <img class="thumbnail" src="https://i.ytimg.com/vi/YHLZitYYyIg/mqdefault.jpg" data-index="0" data-title="Vsauce enters The Create Unknown – Vsauce2 po..." style="opacity: 1;outline: white solid 3px;outline-offset: -3px;">
  </div>
  <div class="thumbnail_wrapper">
    <img class="thumbnail" src="https://i.ytimg.com/vi/YHLZitYYyIg/mqdefault.jpg" data-index="1" data-title="Vsauce enters The Create Unknown – Vsauce2 po..." style="opacity: 1;outline: white solid 3px;outline-offset: -3px;">
  </div>
  <div class="thumbnail_wrapper">
    <img class="thumbnail" src="https://i.ytimg.com/vi/YHLZitYYyIg/mqdefault.jpg" data-index="2" data-title="Vsauce enters The Create Unknown – Vsauce2 po..." style="opacity: 1;outline: white solid 3px;outline-offset: -3px;">
  </div>
  <div class="thumbnail_wrapper">
    <img class="thumbnail" src="https://i.ytimg.com/vi/YHLZitYYyIg/mqdefault.jpg" data-index="3" data-title="Vsauce enters The Create Unknown – Vsauce2 po..." style="opacity: 1;outline: white solid 3px;outline-offset: -3px;">
  </div>
</div>