Imgで動作するaddClassを取得できません

Question

私はこのフォームで作業しています。ラジオボタンを退屈ではなく、人々がクリックできる画像を使用しています。そして、jQueryを使用して、.prop("checked", true)を共同応答ラジオ入力。

しかし、私はスーパーシンプルであったはずだったと思っていたものが私の最高を得ていました。私はクリックした画像に "checked"のクラスを追加しようとしています。そのため、現在の不透明度を.3から1に変更するCSSルールに対応し、チェックされました "。シンプルに聞こえますが、何らかの理由で私は何か不足しているようです。

ここは私の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")); 

    }); 

}); 

--Note -

これは私のコードの一部です。<form></form>は含まれていませんが、それは私のオリジナルです。私はimgに関心があり、ボタンをチェックするだけです。

Answer 1

あなたの答えをみんなありがとう！

しかし、この問題は解決されました。残念ながら、私に答えを与えた個人は、私が彼に感謝する前に彼の答えを削除しました。何らかの理由で彼の答えが投票されましたか？問題は私がしたかったのはでした。 。

私はフォームの別の領域で作業していましたが、何らかの理由でjQueryがピリオドを使用せずにクラスを追加（または削除）することはできませんでした。おそらくそこには私が理解していないものがありますが、今は動作します。

ご回答いただきありがとうございます。

Answer 2

imgは、子であり、クラス.thumbsの要素の兄弟ではありません。重複したIDのようなhtmlのエラーの一部を修正しました。ラベルの属性が間違っています。また、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 3

あなたもHTMLのタイプミスを持っている（「lable」「ラベル」でなければなりません）、ラベルがありません名前が必要ですが、ラベルがその要素に関連付けられていることを確認するために、参照しているinput要素のidをポイントする必要があります。

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

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

Answer 4

私はあなたのコードビットを編集し、削除しなければなりません "" 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>