Question

我还在学习jquery以及如何将它们放在一起，但我已在购物清单中设置此代码：

<div class="AddCheckedWrapper">
    <span>Check to Add to Cart</span>
    <input name="atcuid" type="checkbox">
</div>

我希望这个如何工作是使用Jquery，有.AddCheckedWrapper选中复选框并再次单击它取消选中它。然后，如果选中该框.AddCheckedWrapper背景变为蓝色。如果没有检查，则.AddCheckedWrapper背景会变为粉红色。我遇到的问题是1）我找不到编码，使得div检查并取消选中并让它改变背景颜色。 2）因为它是一个列表，所以有多个.AddCheckedWrapper所以我知道$（this）必须以某种方式使用。我还有一个数量框，如果您更改其中的内容，则会选中复选框。因此，如果我更改数量框中的数字，无论它是否都会选中复选框。所以背景颜色必须基于被检查的复选框而生效，这就是我遇到麻烦的地方。

Answer 1

您是正确的，您可以使用引发事件的元素的.AddCheckedWrapper引用来遍历DOM并找到相关的closest()。在这种情况下，您可以使用toggleClass()方法查找元素，然后change。

当更改行中的数量字段时，您还可以在复选框上引发$('.AddCheckedWrapper :checkbox').change(function() { $(this).closest('.AddCheckedWrapper').toggleClass('checked', this.checked); }); $('.AddCheckedWrapper .qty').change(function() { $(this).closest('.AddCheckedWrapper').find(':checkbox').prop('checked', this.value != 0).change(); });事件。试试这个：

.AddCheckedWrapper {
  background-color: pink;
}
.AddCheckedWrapper.checked {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="AddCheckedWrapper">
  <label>
    <span>Check to Add to Cart</span>
    <input name="atcuid" type="checkbox">
  </label>
  <input name="qty" type="number" class="qty" min="0">
</div>
<div class="AddCheckedWrapper">
  <label>
    <span>Check to Add to Cart</span>
    <input name="atcuid" type="checkbox">
  </label>
  <input name="qty" type="number" class="qty" min="0">
</div>

   {  
   "groups":[  
      {  
         "group":"",
         "favourites":[  
            {  
               "category":"",
               "longitude":1.0812308,
               "latitude":49.4304904,
               "test":"",
               "color":0,
               "name":"Place Henri Gadeau de Kerville, Centre Ville Rive Gauche"
            },
            {  
               "category":"",
               "longitude":1.940849,
               "latitude":48.57248,
               "test":"",
               "color":0,
               "name":"Rue Charles de Gaulle, Saint-Arnoult-en-Yvelines"
            },
            {  
               "category":"",
               "longitude":1.9358053,
               "latitude":48.570592,
               "test":"",
               "color":0,
               "name":"Rue des Remparts, Saint-Arnoult-en-Yvelines"
            },
            {  
               "category":"",
               "longitude":1.0856655,
               "latitude":49.4291327,
               "test":"",
               "color":0,
               "name":"Rue Marie Duboccage (Saint-Sever), Rouen"
            },
            {  
               "category":"",
               "longitude":1.0845655,
               "latitude":49.4251747,
               "test":"",
               "color":0,
               "name":"Rue Octave Crutel, Rouen"
            }
         ],
         "color":0
      }
   ]
}

选中复选框时，Div会更改背景颜色

1 个答案: