无法让 addClass 在 Img 上工作

Question

我正在处理这个表格，我使用人们可以点击的图像代替无聊的单选按钮，然后使用 jQuery 我将 .prop("checked", true) 添加到共同响应无线电输入。

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

这是我的 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

img 是 class .thumbs 的子元素而不是兄弟元素。我修复了 html 中的一些错误，例如重复的 ID、标签上的错误属性。此外 jquery addClass 接受字符串作为参数并且没有 css class 选择器：

var $thumb = $(".thumbs img");
$thumb.click(function() {
  //remove checked class from other images
  $thumb.removeClass("checked");
  //add checked class to click image
  $(this).addClass("checked");
  $(this).children("input[type=radio]").prop("checked", true);
});

.r-form .thumbs {
  border: 1px solid grey;
  width: 95%;
  display: inline-block;
  float: right;
  margin: 0px 5% 0px 0%;
}
.r-form .thumbs label {
  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">
    <label>Would you recommend this host?</label>
    <input type="radio" class="thumbs" name="thumbs" value="yes" />
    <img class="thumb_r" alt="thumb" src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97100&w=200&h=100" />
    <input type="radio" class="thumbs" name="thumbs" value="no" />
    <img class="thumb_r"  alt="thumb" src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97100&w=200&h=100">
  </div>
</div>

Answer 2

你在HTML中也有错别字（"lable"应该是"label"），标签不需要名字但应该有一个for=""指向您所引用的输入元素的 ID，以确保标签与该元素相关联。

<lable name="thumbs">Would you recommend this host?</lable>

应该是

 <label for="thumbs">Would you recommend this host?</label>

Answer 3

我稍微编辑了你的代码，删除了“.”在 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>

Answer 4

谢谢大家的回答！

不过，这个问题已经解决了。不幸的是，给我答案的人在我感谢他之前删除了他的答案（出于某种原因他的答案被否决了？）问题是我试图 addClass(".checked") 而我应该做的是 addClass("checked"), 没有句点。

我在表单的另一个区域工作，由于某种原因，jQuery 不使用句点就无法与类配合（添加或删除）。也许那里有些东西我不明白，但它现在起作用了。

再次感谢您的回答。

无法让 addClass 在 Img 上工作

Can't get addClass working on an Img

jquery

css

image

addclass