如何在jQuery中使用属性来设置特定元素的样式答案

【问题标题】：how to use attributes to style to a specific element in jQuery如何在jQuery中使用属性来设置特定元素的样式
【发布时间】：2018-01-12 20:09:11
【问题描述】：

我有一个容器元素，其中包含一组 div，每个 div 中都包含一个图像元素。如何将样式仅应用于该图像，而不是具有相同容器元素的其他元素？

这是我目前所拥有的 (html)：

  <div class="media_img_container">              
      <div class="col-xs-6 col-sm-4 col-md-3 thumb">
          <a class="thumbnail thumbnail_overlay_container" href="#">
              <img class="img-responsive" 
               src="http://placehold.it/400x300" alt="" 
               id="media_img_01">
               <div class="thumbnail_overlay">
                 <div class="text">
                     <i class="fa fa-plus fa-lg"></i 
                 </div>
               </div>
              <button class="thumbnail_btn">
                <span class="thumbnail_btn-icon"></span>
              </button>
            </a>
        </div>

这是我的css：

.thumbnail_overlay_container .thumbnail_btn{
display: none;
position: absolute;
top: 0;
right: 0;
height: 24px;
width: 24px;
background-color: #0073aa;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa;
}

这是我的 jquery：

$(document).ready(function(){

var media_img_container = $('.media_img_container');

var media_images = media_img_container.find('img');

$('a').click(function(){
    var idAttr = $(this).find('img').attr('id');
    if(idAttr){
        $('.thumbnail_btn').css('display','block');
    }
})

})

【问题讨论】：

您正在获取media_images 和idAttr，但您对这些引用什么也不做（？）。
我的目标是找到一种“程序化”的方式来影响被点击元素的样式，而不是全部。我想为此使用 attr 方法。当我单击锚元素并且所有这些元素都出现缩略图时，问题就出现了。

标签： jquery arrays styles

【解决方案1】：

这个问题不是很简单，但您可以通过添加属性、类或使用该结构对您有利的结构来轻松定位任何 DOM 元素。顺序：

$('.media_img_container img[attribute]')  // <img attribute class='...
$('.media_img_container img.myClass')     // <img class='myClass' ...
$('.media_img_container img:eq(0)')       // uses known structure

如果您单击图像并希望对其应用样式：

$('#something').click(function() { $(this).attr('myAttr','somevalue'  });

然后在 css 中你可以定位这个：.media_img_container img[myAttr=somevalue] 或只是 .media_img_containerimg[myAttr]`

【讨论】：

甚至.media_img_container img，因为容器中似乎没有任何其他图像。
是的，问题还不清楚，你显然可以使用任何所需的层次结构。但是没有.img_container 类。
当我单击锚元素并且样式（即 thumbnail_btn）适用于所有子元素时，问题就出现了。我想使用 attr 方法只影响被点击的那个。
@JohnnyG 在您的问题中，任何具有“thumbnail_btn”类的元素中都没有 img。