JQueryの背景を切り替えますか?
-
05-07-2019 - |
質問
DKK
" id =" radio2" value =" 75" />whileループによって生成されたこれらのdivエントリの束があるため、これを達成したいです:エントリ内の入力がクリックされたとき、エントリdivの背景画像を変更したいが、別のエントリdivで別のラジオを選択した場合.. I 「以前のすべての変更(バックグラウンドの以前の変更など)を廃止し、現在のdivのバックグラウンドを変更したい..ここで私がやろうとしたことがあります..ここにjqueryがあります
$("input").click(function() {
$(this).parent("div").toggle(function() {
$(this).parent("div").css("background", "url(images/div_bg_hover.png)");
}, function() {
$(this).parent("div").css("background", "url(images/div_bg.png)");
});
何かが誤動作している..私は、コードinst 'がまったく機能しないことを意味します..誰でも私を助けることができますか?ありがとう
これを両方試しました:
$("input").click(function() {
$("input").each(function() {
if (this.checked) {
$(this).parent("div").addClass("highlight");
}
else {
$(this).parent("div").removeClass("highlight");
}
});
});
AND
$("input").click(function() {
$("input").each(function() {
if (this.checked) {
$(this).parent("div").css("background", "url(images/div_bg_hover.png)");
}
else {
$(this).parent("div").css("background", "url(images/div_bg.png)");
}
});
});
何らかの理由で、背景を変更せずにまったく動作しない場合、完全なスクリプトである上記のコードで何かを行う必要があるかもしれません:
<script type="text/javascript">
$(document).ready(function() {
$(".left_navigation a:last").toggleClass('bolder');
$("input").each(function() {
var element_value = $(this).val();
$(this).prev("p").append(" " + element_value + ",-");
});
$("input").click(function() {
$("input").each(function() {
if (this.checked) {
$(this).parent("div").addClass("highlight");
}
else {
$(this).parent("div").removeClass("highlight");
}
});
});
});
</script>
解決
最初に目にする問題は、jQueryに最後に});;
が欠落していることです。それはエラーを投げる以外のことをするのを止めるでしょう...
これは、以前に試した簡易版です。少なくともデバッグが少し簡単になるかもしれません。
<script type="text/javascript">
$(document).ready(function(){
$("input").click( function() {
$("input").parent("div").removeClass("highlight");
$(this).parent("div").addClass("highlight");
});
});
</script>
しかし、あなたが以前に試したことについて明らかに間違っていることは見当たりません。おそらく、クリック機能内の健全性チェックのために、少なくともいくつかのことを警告します。実際には、フレームワークのために入力が準備される前、つまり、 $(document).ready
が発動していたことが何度か見つかりました...
他のヒント
いくつかの問題があります:
- トグルを使用しており、トグル機能は次のとおりです。
それらが表示されている場合、トグルはそれらを作成します 非表示(hideメソッドを使用)。もし それらは隠されており、トグルはそれらを作ります 表示されます(showメソッドを使用)。
ラジオがチェックされているかどうか尋ねる必要があります
-
他のラジオdiv値を変更するには、各関数を呼び出す必要があります
-
$(document).ready()
関数を呼び出す必要があります
サンプル(警告:Javascriptは私の最高の武器ではありません):
<script>
$(document).ready(function(){
$("input").click( function() {
$("input").each(function() {
if (this.checked) {
$(this).parent("div").css("background-color", "green") }
else {
$(this).parent("div").css("background-color", "red")}
});
});
});
</script>
注:より良いテストのために背景色を使用しましたが、背景の使用は適切です。
画像を設定するには、単に「背景」の代わりに「背景画像」を使用する必要がある場合があります。
edit:以前jQueryの 'background' cssプロパティに問題があったと思っていましたが、さまざまなブラウザーでテストしたところ、間違っていたか、jQueryのバージョンで修正されたようです。