html 选择/取消选择列表中的图像

ma8fv8wu 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(159)

我正在创建一个相册功能，用户可以从一组照片中选择照片，然后将它们应用到一个文件夹中，问题是，我在选择特定的照片和应用某些属性时遇到了麻烦（主要是css风格，我希望在选择时图像周围有边框）。
下面是html/jquery：
超文本标记语言

<div class="demo-gallery">
  <ul id="lightgallery" class="list-unstyled grid">
    <?php foreach ( $media_items as $item ): ?>
      <li>
         <img class="img-responsive" id="lazy" data-src="<?php echo $item->image_path_sd; ?>">
      </li>
    <?php endforeach; ?>
  </ul>
</div>

查询

var picture = document.querySelectorAll('#lazy');
$(picture).each(function () {
    $(document).on('click', /*???*/, function () {
        if ($(/*???*/).data('clicked', true)) {
            $(/*???*/).css("border", "none");
            $(/*???*/).data('clicked', false);
        } else {
            $(/*???*/).css("border", "4px solid #00CE6F");
            $(/*???*/).data('clicked', true);
            console.log($(/*???*/).data());
        }
    });
});

我的猜测是，我需要弄清楚所有的评论都在哪里，然而，我可能是在错误的方向尝试这个。
当我使用console.log（picture）时，我得到了一个包含所有照片的数组。当我使用console.log（picture[2]）时，它显示了第三张图片。这就是我想要的，但是我如何将这些属性应用到每张照片上呢？
总的来说：我希望用户点击他们想要的照片，应用一个突出显示的照片周围的边界，让他们知道它是当前选定的。

Html

来源：https://stackoverflow.com/questions/74803800/select-unselect-images-in-a-list

2条答案

按热度按时间

9lowa7mx1#

由于您使用的是jQuery，因此不需要使用文档函数，当您选择可以应用于多个项目的内容（如类名）时，可以获取项目列表。
这里的关键是使用jQuery时，.each(function(){ })传入元素本身，您可以使用this访问它。using $(pictures).each()允许您访问该集合中的每个单独元素。
因此，您可以在每个img本身上放置一个单击侦听器，而不是在文档上应用一个单击侦听器。
要显示边框，请将样式作为类放入css文件中，然后使用$().toggleClass(/* class name */)函数。

var pictures = $('.lazy');

$(pictures).each(function () {
    // apply click listener to each image
    $(this).on('click', function () {
    
        // toggle the checked value
        if ($(this).data('clicked') == true) {
            $(this).data('clicked', false);
        } else {
            $(this).data('clicked', true);
        }
        
        // toggles the border
        $(this).toggleClass('selected');
        
        // display contents of all the items
        $(pictures).each(function(index){
          console.log('img #' + index + ': ' + $(this).data("clicked"))
        })
    });
});

.lazy {
padding: 10px;
display: inline;
background-color: red;
margin: 10px;
}

.selected {
  border: 2px solid black;
}

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

<!-- Replace with PHP foreach -->
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">
<!-- Replace with PHP foreach -->

赞(0）回复(0）举报 2022-12-16

szqfcxe22#

不能对同一个HTML文档中的多个标记使用相同的id选择器，而是使用“.lazy”类选择器。
你就可以做这样的事。
CSS：

.selected-image{
    border:1px solid #000;
}

查询：

$(".lazy").click(function(){
    const img = $(this)
    if(img.hasClass("selected-image")){
        img.removeClass("selected-image")
    }
    else{
        $(this).addClass("selected-image")
    }
})

赞(0）回复(0）举报 2022-12-16

我来回答

html 选择/取消选择列表中的图像

2条答案

相关问题

热门标签

最新问答