Question

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

然而，我认为本来应该是超级简单的一直是我最好的。我正在尝试将“已检查”类添加到被点击的图像中，以便它将与我所拥有的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

img是小孩，不是类.thumbs的元素的兄弟。我修复了html中的一些错误，比如重复的id，标签上的错误属性。另外jquery addClass接受一个字符串作为参数而没有接受css类选择器：

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中也有拼写错误（＆＃34;标签＆＃34;应该是＆＃34;标签＆＃34;），标签不需要名称但应该有for =＆＃34;＆＃34;指向您要引用的input元素的id，以确保标签与该元素相关联。

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

应该是

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

Answer 3

我稍微编辑了你的代码，删除了＆＃34;。＆＃34;在add / removeClass函数中删除了＆＃34;这个＆＃34;的引号。在警报上。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 4

感谢大家的回答！

然而，这个问题已经解决了。不幸的是，给我答案的个人在我能够感谢他之前删除了他的答案（由于某种原因，他的答案被否决了？）问题是我试图addClass(".checked")当我应该做的是{{1} }，没有期间。

我在表单的另一个区域工作，出于某种原因，jQuery不会在不使用句点的情况下与类（添加或删除）合作。也许那里有一些我不理解的东西，但它现在有效。

再次感谢您的回答。

无法让addClass在Img上工作

4 个答案: