javascript - 将不透明度设置为所有图 block ，选定的图 block 除外

Question

我注意到有几个问题与这个问题相似，但又不完全相同。我正在使用 ng-repeat 来显示我上传的所有图片。我可以点击其中一张，它将成为默认图片。我希望单击的图像看起来正常，而所有其他图像都有 overlay。我尝试在我的 selectImage 函数中设置 $('overlay').hide()，但这只会从我的 HTML 中删除第一张图片上的叠加层。关于如何执行此操作的任何想法？

HTML

<!-- PHOTOS -->
      <div class="uploads-section" style="width: 100%;">
        <md-grid-list md-cols="3" md-row-height="1:1" md-gutter="8px" style="padding-top: 10px;">
          <md-grid-tile md-rowspan="1" md-colspan="1">
            <div style="background-color: #3F454b; padding: 30px; cursor: pointer; height: 100%; width: 100%;" class="upload-tile no-outline" layout="column" layout-align="center start" ng-click="uploadImage('photo')">
              <md-icon style="color: #FFFFFF; width: 40px; height: 40px;" md-svg-icon="images/upload.png"></md-icon>
              <p class="action-link" style="margin: 0; color: #FFFFFF;">UPLOAD</p>
            </div>
          </md-grid-tile>
          <md-grid-tile ng-repeat="photo in org.attachments | filter:{type:'photo'}" md-rowspan="1" md-colspan="1" style="opacity: .5;">
            <div style="width: 100%; height: 100%; position: relative; overflow: hidden;" class="attachment-tile no-outline" layout="row" layout-align="center center" ng-click="selectImage($event, photo)">
              <!-- <p class="m1">Loading...</p> -->
              <img attachment-src="{{ photo.path | ThumbnailFilter }}" default-src="images/no_img.png" style="cursor: pointer; height: 100%; width: 100%; object-fit: cover;">
            </div>
          </md-grid-tile>
          <md-grid-tile ng-repeat="photo in org.defaultOrgImages | filter:{type:'photo'}" md-rowspan="1" md-colspan="1">
            <div style="width: 100%; height: 100%; position: relative; overflow: hidden;" class="attachment-tile no-outline" layout="row" layout-align="center center" ng-click="selectImage($event, photo)">
              <!-- <p class="m1">Loading...</p> -->
              <img attachment-src="{{ photo.path | ThumbnailFilter }}" default-src="images/no_img.png" style="cursor: pointer; height: 100%; width: 100%; object-fit: cover;">
              <div id="overlay"></div>
            </div>
          </md-grid-tile>
        </md-grid-list>
      </div>

Controller

$scope.selectImage = function (ev, attachment) {
  if (attachment.type == 'photo' && attachment.path != $scope.org.defaultPhoto) {
    $scope.org.defaultPhoto = attachment.path;
    saveOrg();
  }
};

少

 #overlay {
    position: relative;
    cursor: pointer;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
 }

Answer 1

我想说完成这个最简单的方法是在你的 CSS/LESS 文件中创建一个类，如下所示:

.faded {
  opacity: 0.5;
}

然后您所要做的就是将 faded 附加到您想要淡化的 img 的类值。

这通常是更改多个元素的不透明度的最好和最简单的方法。