选择子元素 jquery img

Question

大家晚上好。我有一些自定义复选框，如果单击其中一个主题，我想为它们添加一个 css 类（边框：1px 纯红色）。这是我的 HTML

        <div class="row">
            <div id="format3" class="col-md-12 col-md-offset-1">
                <div class="col-md-12">
                    <div class="col-md-2 col-centered copertine">
                        <input type="checkbox" id="copertina1" class="copertine">
                        <label  class="copertina" for="copertina1">
                            <img src="img/copertina1.jpg" for="copertina1" alt=""
                            class="immagineCopertina">
                        </label>
                    </div>
                    <div class="col-md-2 col-centered copertine">
                        <input type="checkbox" id="copertina2" class="copertine">
                        <label for="copertina2" class="copertina">
                            <img src="img/copertina2.jpg" for="copertina1" alt="">
                        </label>
                    </div>
                    <div class="col-md-2 col-centered copertine">
                        <input type="checkbox" id="copertina3" class="copertine">
                        <label for="copertina3" class="copertina">
                            <img src="img/copertina3.jpg" for="copertina1" alt="">
                        </label>
                    </div>
                </div>
            </div>
        </div>

这是我制作的 Jquery：

<script type="text/javascript">
    $(document).ready(function() {
        if ($(':checkbox').on('change', function () {
            if ($(this).hasClass('copertine')) {
              $('.immagineCopertina').css( "border", "3px solid red");
            };
        }));
    });
</script>

现在，如果我单击第一个元素，我的边框会变成红色，但我需要将此 css 添加到我正在选择的元素中。我尝试使用

($(this).class('.immagineCopertina')).css( "border", "3px solid red");

($this) 元素不起作用。我认为是一种语法。有人可以帮我吗？

Answer 1

我不确定你想要实现什么，因为没有看到 imagineCopertina 类在哪里，但是...请参阅下面的示例并让它讨论...

if ($(':checkbox').on('change', function() {
    if ($(this).hasClass('copertine')) {
      $(this).parents('.copertine').css("border", "3px solid red");
    };
  }));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div id="format3" class="col-md-12 col-md-offset-1">
    <div class="col-md-12">
      <div class="col-md-2 col-centered copertine">
        <input type="checkbox" id="copertina1" class="copertine">
        <label class="copertina" for="copertina1">
          HERE 1
        </label>
      </div>
      <div class="col-md-2 col-centered copertine">
        <input type="checkbox" id="copertina2" class="copertine">
        <label for="copertina2" class="copertina">
          HERE 2
        </label>
      </div>
      <div class="col-md-2 col-centered copertine">
        <input type="checkbox" id="copertina3" class="copertine">
        <label for="copertina3" class="copertina">
          HERE 3
        </label>
      </div>
    </div>
  </div>
</div>

Answer 2

我猜你的意思是你想将红色边框应用于所选元素的图像，在这种情况下你可以这样做：

$(this).next().children().css("border","3px solid red");

代替行：

$('.immagineCopertina').css( "border", "3px solid red");

如果您的可选项目的结构始终相同，则这种方式将起作用，即：

<div class="col-md-2 col-centered copertine">
     <input type="checkbox" id="copertina1" class="copertine">
     <label  class="copertina" for="copertina1">
         <img src="img/copertina1.jpg" for="copertina1" alt="" class="immagineCopertina">
     </label>
</div>

因为它通过获取当前复选框的$(this) 将css 样式应用于标签的任何子级，使用.next() 转到标签，然后使用.children() 获取标签的子级。请记住，如果您在标签中还有其他内容，则 css 也将应用于该标签。

如果你想把它应用到整个 div 上，那么：

$(this).parent().css("border", "3px solid red");

Answer 3

看到这个fiddle

您可以使用 jQuery .parent() 来选择元素的父级。

根据docs

.parent() 获取当前匹配元素集中每个元素的父元素， 可选地由选择器过滤。

如下改变你的JS

 $(document).ready(function() {
   if ($(':checkbox').on('change', function() {
       if ($(this).hasClass('copertine')) {
         $('.immagineCopertina').parent().parent().css("border", "3px solid red");
       };
     }));
 });

Answer 4

您的代码有一些问题：

1. 这一行：

   if ($(':checkbox').on('change', function () {
   

   使用.on()，您将函数绑定到onchange 事件。像 jQuery 中的大多数方法一样，.on() 是可链接的，这意味着它返回您执行它的同一个 jQuery 集合。因此，这一行中的if 条件是不必要且令人困惑的。它应该是：

   $(':checkbox').on('change', function () {
       if ($(this).hasClass('copertine')) {
         $('.immagineCopertina').css("border", "3px solid red");
       };
   });
   

2. 上面的代码所做的是：每当匹配:checkbox选择器的元素（所以任何<input type="checkbox">）接收到onchange事件时，它都会检查该元素是否具有copertine类，如果是，则检查任何元素在与.immagineCopertina 选择器匹配的DOM 中（在您发布的HTML 中，它只会匹配此元素：<img src="img/copertina1.jpg" for="copertina1" alt="" class="immagineCopertina">）将其内联CSS border 属性设置为3px solid red。我猜这不是你想要的。我建议像这样重写代码：

   $('.copertine:checkbox').on('change', function () {
       $(this).parent().find('label').css("border", "3px solid red");
   });
   

   请注意，我已在选择器中集成了对 copertine 类的检查，以使代码更紧凑。另外，我专门设计了 label 元素的样式，它是选中的复选框的兄弟元素。

3. 如果您想在取消选中复选框时移除红色边框，还有更多工作要做。你可以这样做：

   $('.copertine:checkbox').on('change', function () {
       var $label = $(this).parent().find('label');
       if ($(this).is(":checked")) {
           $label.css("border", "3px solid red");
       }
       else {
           $label.css("border", "");
       }
   });
   

Answer 5

Try this

 $(document).ready(function() {
        if ($(':checkbox').on('change', function () {

            if ($(this).is(":checked")) {
                $(this).parent().css("border", "3px solid red");
            }
            else {
                $(this).parent().css("border", "");
            }
        }));
    });