jQuery, проблема с именем переключателя в форме массива - PullRequest
Новая
       0

jQuery, проблема с именем переключателя в форме массива

1 голос
/ 28 декабря 2010 
<!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>

Это работает. 

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

Ответы [ 3 ]

1 голос
/ 28 декабря 2010

Вам необходимо использовать кавычки в атрибуте , равном селектору : 

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

Итак, вам нужно обновить все ваши селекторы, используя [attribute='value']. Я обновил ваш нерабочий пример здесь: http://jsfiddle.net/andrewwhitaker/PTtFt/

В следующий раз, пожалуйста, сузьте вашу проблему до более конкретного фрагмента кода и будьте более конкретны в отношении вашей проблемы.

1 голос
/ 28 декабря 2010

Хорошо, я поместил два ваших примера на JSFiddle.

Пример 1 :

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

Пример 2 :

http://jsfiddle.net/aN6g9/

Редактировать

Хорошо, я наконец понял, что ты здесь делаешь. В первом примере ваша переменная secilenMadde имеет значение line1 или line2. Во втором вы используете массивы форм 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/

0 голосов
/ 28 декабря 2010

Поскольку ваши имена содержат [ и ], вам нужно заключить имя в " при использовании в качестве селектора.

, поэтому попробуйте 

$('input[name="'+secilenMadde+'"][value=green]')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...