Question

我有这两个复选框，如果选中该复选框以添加特定类，我会尝试访问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标签并添加带边框的类。

Answer 1

if：cheked add this

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

并在其他地方添加此行

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

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

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

Answer 2

在更改时，按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');  });

Answer 3

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

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

所以你现在可以做到这一点

imgSelected.addClass('bordered');

或

imgSelected.removeClass('bordered');

WORKING DEMO

Jquery访问标签内的img

3 个答案: