jquery访问img里面的标签答案

【问题标题】：Jquery access img inside labeljquery访问img里面的标签
【发布时间】：2016-04-01 17:07:56
【问题描述】：

我有这两个复选框，如果选中该复选框以添加特定类，我将尝试访问 img 标记。我不知道如何访问 img 标签。

<div class="row ">   
  <div class="col-md-5 col-md-offset-1 col-centered piege">
    <input type="checkbox" id="piega1" class="piege servizioSection2 " name="imgSection2"value="Piega By Wella Professionals">
    <label  class="piega labelStylingImg " for="piega1">
      <img src="img/piega1.png" for="piega1" alt="" class="img-responsive immaginePiega ">
    </label>
    <h1 class="immagineTitoloPiega">PIEGA BY WELLA PROFESSIONALS</h1>
  </div>
  <div class="col-md-5  col-centered piege">
    <input type="checkbox" id="piega2" name="imgSection2" class="piege servizioSection2" value="Piega By System Professionals">
    <label for="piega2" class="piega labelStylingImg">
      <img src="img/piega2.png" for="piega2" alt="" class="img-responsive immaginePiega">
    </label>
    <h1 class="immagineTitoloPiega">PIEGA BY SYSTEM PROFESSIONALS</h1>
  </div>
</div>

我的功能应该是：如果选中复选框，则将borderRed类添加到img。

我写道：

$(document).ready(function() {
  $(':checkbox').on('change', function (){
    if ($(this).hasClass('servizioSection2')) {
      if ($(this).is(':checked')){
        console.log('selected');
        var imgSelected = $(this).find('.immaginePiega');
      } else if ($(this).prop('checked', false)) {
        console.log('non selezionata');
      };         
    };
  })
});

我可以console.log selezionato，但不能访问 img 标签并向其添加带边框的类。

【问题讨论】：

我不确定您所说的“添加边框类”是什么意思

标签： jquery html css forms selector

【解决方案1】：

如果 :cheked 添加这个

$(this).next().addClass('active');

在 else 中添加这一行

$(this).next().removeClass('active');

并使用此类 .labelStylingImg.active img 添加您的自定义 css 例如

.labelStylingImg.active img{ border: 2px solid red; }

【讨论】：

【解决方案2】：

使用next() 然后find() 像这样，

var imgSelected = $(this).next().find('.immaginePiega');

所以你现在可以这样做了

imgSelected.addClass('bordered');

或

imgSelected.removeClass('bordered');

WORKING DEMO

【讨论】：

【解决方案3】：

更改时，通过attr 获取标签，属性“for”复选框 id。 img 只是它的后代（并且它也共享相同的 attr），看起来很简单。

例如，简化一点：

$('#piega1').click(function(){ $('img[for=piega1]').addClass('borderRed'); });

或更具体地针对您的情况：

     $(':checkbox').change(function(e){
     var element = $('img[for='+$(e.target).attr('id')+']');
     if(element.hasClass('boderRed'))
         element.removeClass('borderRed');
     else
         element.addClass('borderRed');  });

【讨论】：

请问我有问题，你能告诉我如何在更改时通过 attr 获取标签吗？
我在响应中添加了一个简单的示例，您可以更改事件.change()，或者您需要的任何内容。
从一个适当的键盘重新设计了它，并为示例提供了更合适的代码。用手机输入代码更难:)。