jQuery、配列形式のラジオボタン名の問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>click div to select hidden options</title> 
<script type="text/javascript" src="jquery-1.4.4.js"></script> 
<style type="text/css"> 
.clickDiv { 
width:50px; 
height:50px; 
cursor:crosshair; 
} 
.red {border:1px #000 solid;} 
.green {border:1px #000 solid;} 
.redBG {background:#F00;} 
.greenBG {background:#0F0;} 
</style> 
<script type="text/javascript"> 
$(function() { 
    $('div.clickDiv.red').click(function(){ 
    var secilenMadde=$(this).attr('madde'); 
    $('div#write').text(secilenMadde); 
     $('input[name='+secilenMadde+'][value=red]').attr('checked', 'checked'); 
    $('div.clickDiv.red[madde='+secilenMadde+']').addClass('redBG'); 
    $('div.clickDiv.green[madde='+secilenMadde+']').removeClass('greenBG'); 
    }); 
    $('div.clickDiv.green').click(function(){ 
    var secilenMadde=$(this).attr('madde'); 
    $('div#write').text(secilenMadde); 
     $('input[name='+secilenMadde+'][value=green]').attr('checked', 'checked'); 
    $('div.clickDiv.green[madde='+secilenMadde+']').addClass('greenBG'); 
    $('div.clickDiv.red[madde='+secilenMadde+']').removeClass('redBG'); 
    }); 

}); 

</script> 
</head> 

<body> 
<div id="write"></div> 
<form id="formId" name="formName" method="post"> 
    <table> 
    <tr> 
     <td><div class="clickDiv red" madde="line1"></div></td> 
     <td><div class="clickDiv green" madde="line1"></div></td> 
    </tr> 
    <tr> 
     <td><div class="clickDiv red" madde="line2"></div></td> 
     <td><div class="clickDiv green" madde="line2"></div></td> 
    </tr> 
    </table> 
    <label for="line1red"><input id="line1red" type="radio" name="line1" value="red" /> Red</label> 
    <label for="line1green"><input id="line1green" type="radio" name="line1" value="green" /> Green</label><br /> 

    <label for="line2red"><input type="radio" name="line2" value="red" /> Red</label> 
    <label for="line2green"><input type="radio" name="line2" value="green" /> Green</label> 

</form> 
</body> 
</html>

これは機能します。jQuery、配列形式のラジオボタン名の問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>click div to select hidden options</title> 
<script type="text/javascript" src="jquery-1.4.4.js"></script> 
<style type="text/css"> 
.clickDiv { 
width:50px; 
height:50px; 
cursor:crosshair; 
} 
.red {border:1px #000 solid;} 
.green {border:1px #000 solid;} 
.redBG {background:#F00;} 
.greenBG {background:#0F0;} 
</style> 
<script type="text/javascript"> 
$(function() { 
    $('div.clickDiv.red').click(function(){ 
    var secilenMadde=$(this).attr('madde'); 
    $('div#write').text(secilenMadde); 
     $('input[name='+secilenMadde+'][value=red]').attr('checked', 'checked'); 
    $('div.clickDiv.red[madde='+secilenMadde+']').addClass('redBG'); 
    $('div.clickDiv.green[madde='+secilenMadde+']').removeClass('greenBG'); 
    }); 
    $('div.clickDiv.green').click(function(){ 
    var secilenMadde=$(this).attr('madde'); 
    $('div#write').text(secilenMadde); 
     $('input[name='+secilenMadde+'][value=green]').attr('checked', 'checked'); 
    $('div.clickDiv.green[madde='+secilenMadde+']').addClass('greenBG'); 
    $('div.clickDiv.red[madde='+secilenMadde+']').removeClass('redBG'); 
    }); 

}); 

</script> 
</head> 

<body> 
<div id="write"></div> 
<form id="formId" name="formName" method="post"> 
    <table> 
    <tr> 
     <td><div class="clickDiv red" madde="line[1]"></div></td> 
     <td><div class="clickDiv green" madde="line[1]"></div></td> 
    </tr> 
    <tr> 
     <td><div class="clickDiv red" madde="line[2]"></div></td> 
     <td><div class="clickDiv green" madde="line[2]"></div></td> 
    </tr> 
    </table> 
    <label for="line1red"><input id="line1red" type="radio" name="line[1]" value="red" /> Red</label> 
    <label for="line1green"><input id="line1green" type="radio" name="line[1]" value="green" /> Green</label><br /> 

    <label for="line2red"><input type="radio" name="line[2]" value="red" /> Red</label> 
    <label for="line2green"><input type="radio" name="line[2]" value="green" /> Green</label> 

</form> 
</body> 
</html>

これはありません。

入力名が配列として必要ですが、スクリプトが壊れます。どうして？スクリプトの提案はdivをクリックしてラジオボタンを選択することです。

出典

2010-12-28 borayeris

てみては？どこにもエラーは見られませんか？ – treeface

OK、私はあなたの2つの例をJSFiddleに入れました。

例1：

http://jsfiddle.net/ryKjc/1/

例2：

http://jsfiddle.net/aN6g9/

編集：

さて、私はあなたがここで何をしているのかを最終的に考え出しました。最初の例では、secilenMadde変数はline1またはline2です。 2番目の方法では、HTMLのフォーム配列を使用し、ラジオボタングループline[1]とline[2]の名前を付けています。問題はセレクタにあります。あなたは第二の例では、次のように選択をした場合：

$('input[name='+secilenMadde+'][value=red]');

あなたはこれをやっている：あなたのような二重引用符でそれをラップする必要がありますので、

$('input[name=line[1]][value=red]');

これらのブラケットは、ループのためのjQueryのセレクタを投げますこの：

$('input[name="'+secilenMadde+'"][value=red]');

あなたは内側の角括弧と一緒にinput[name]セレクタを使用して、それが動作するはずの任意の場所のためにこれを行います。ここでの証明：

http://jsfiddle.net/aN6g9/1/

出典

2010-12-28 00:53:35 treeface

スクリプトの提案はdivをクリックしてラジオボタンを選択することです。 – borayeris

$（ '入力[名前= "行[1]"] [値=赤]'）; これは正当なものです。私は正しい？ – borayeris

@borayerisうん、それは動作するはずです。 – treeface

あなたはattribute equals selectorに引用符を使用する必要があります。

attribute 
     An attribute name. 
    value 
     An attribute value. Quotes are mandatory.

だから、あなたは[attribute='value']を使用して、セレクタのすべてを更新する必要があります。私はあなたの非実用例をここで更新しました：http://jsfiddle.net/andrewwhitaker/PTtFt/

次回は、問題をより具体的なコードに絞って問題の詳細を特定してください。

出典

2010-12-28 01:01:33

あなたは正しいです。私に警告してくれてありがとう。 – borayeris

あなたの名前は[と]であるため、セレクタとして使用された場合は"に名前をラップする必要があります。

ので、あなたが壊しているものについての詳細を教えてもらえ

$('input[name="'+secilenMadde+'"][value=green]')

出典

2010-12-28 01:01:56

はい、 '[] 'のない属性値は、通常、引用符なしで正しく選択されますが、属性equalsセレクタの' value '部分には常に引用符が必要です。 –

@Andrew、確かに。彼らが初めからそこに必須の部分を持っていたとは思わないでください。 –

jQuery、配列形式のラジオボタン名の問題

答えて

関連する問題