jquery - 无法让 addClass 在 Img 上工作

Question

我正在处理这个表单，我没有使用无聊的单选按钮，而是使用人们可以点击的图像，然后使用 jQuery 我添加了 .prop("checked", true)到共同响应的 radio 输入。

然而，我认为应该非常简单的事情却让我发挥了最大的作用。我正在尝试将“选中”类添加到被点击的图像中，以便它与我拥有的 CSS 规则对应，该规则会将 img 当前不透明度从 .3 更改为 1，让人们知道它已经“检查”。听起来很简单，但出于某种原因，我似乎遗漏了一些东西。

这是我的 jsFiddle .

HTML

<div class="r-form">
<div class="thumbs">
<lable name="thumbs">Would you recommend this host?</lable>
<input type="radio" id="thumbs" name="thumbs" value="yes">
<img class="thumb_r" src="/imgs/thumbs-up-green.png">
<input type="radio" id="thumbs" name="thumbs" value="no">
<img class="thumb_r" src="/imgs/thumbs-down-red.png">
</div>
</div>

CSS

.r-form .thumbs {
    border: 1px solid grey;
    width: 95%;
    display: inline-block;
    float: right;
    margin: 0px 5% 0px 0%;
}

.r-form .thumbs lable {
    display: block;
}

.r-form .thumbs input[type="radio"] {
    display: none;
    margin: 0px;
    padding: 0px;
}

.r-form .thumbs img {

    width: 80px;
    height: 80px;
    opacity: .3;
    margin: 10px 5%;

}

.r-form .thumbs img:hover {
    opacity: 1;
}

.r-form .thumbs img.checked {
    opacity: 1;
}

jQuery

 $(document).ready(function(){

 var $thumb = $(".thumbs").children("img");

 $thumb.click(function(){

        $(this).siblings("img").removeClass(".checked");
        $(this).addClass(".checked");
        $(this).prev("input[type=radio]").prop("checked", true);
        alert($("this").is(".checked"));

    });

 });

--注意--

这只是我的代码的一部分，我没有包括 <form></form> ，但它是我原来的。我只关心 img 和检查按钮。

Answer 1

我稍微编辑了你的代码，删除了“.”在 add/removeClass 函数中删除了警报中“this”处的引号。

 $(document).ready(function() {

   var $thumb = $(".thumbs").children("img");

   $thumb.click(function() {

     $(this).siblings("img").removeClass("checked");
     $(this).addClass("checked");
     $(this).prev("input[type=radio]").prop("checked", true);
     alert($(this).is(".checked"));

   });

 });

.r-form .thumbs {
  border: 1px solid grey;
  width: 95%;
  display: inline-block;
  float: right;
  margin: 0px 5% 0px 0%;
}

.r-form .thumbs lable {
  display: block;
}

.r-form .thumbs input[type="radio"] {
  display: none;
  margin: 0px;
  padding: 0px;
}

.r-form .thumbs img {
  width: 80px;
  height: 80px;
  opacity: .3;
  margin: 10px 5%;
}

.r-form .thumbs img:hover {
  opacity: 1;
}

.r-form .thumbs img.checked {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-form">
  <div class="thumbs">
    <lable name="thumbs">Would you recommend this host?</lable>
    <input type="radio" id="thumbs" name="thumbs" value="yes">
    <img class="thumb_r" src="http://lorempixel.com/image_output/cats-q-c-100-100-5.jpg">
    <input type="radio" id="thumbs" name="thumbs" value="no">
    <img class="thumb_r" src="http://lorempixel.com/image_output/cats-q-c-100-100-3.jpg">
  </div>
</div>