Question

大家晚上好。我有一些自定义复选框，如果我点击其中一个主题，我想给它们添加一个css类（border：1px solid red）。这是我的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类在哪里，但是......看下面的例子并让它讨论......

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

您的代码有些问题：

这一行：
```
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");
    };
});
```
上面代码的作用是：每当匹配:checkbox选择器的元素（所以<input type="checkbox">）都收到onchange事件时，它会检查该元素是否具有该类copertine如果是这样，DOM中与.immagineCopertina选择器匹配的任何元素（在您发布的HTML中，它只匹配此元素：<img src="img/copertina1.jpg" for="copertina1" alt="" class="immagineCopertina">）都有其内联CSS {{1} } property设置为border。我猜这不是你想要的。我建议像这样重写代码：
```
3px solid red
```
请注意，我已在选择器中集成$('.copertine:checkbox').on('change', function () { $(this).parent().find('label').css("border", "3px solid red"); });类的检查，以使代码更紧凑。另外，我特意设计了copertine元素的样式，该元素是已选中的复选框的兄弟。
如果要在取消选中复选框时删除红色边框，还有很多工作要做。你可以这样做：
```
label
```

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", "");
            }
        }));
    });

选择子元素jquery img

5 个答案:

请参阅此fiddle