Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.10.2012, 13:35
Аспирант
Отправить личное сообщение для bartonom Посмотреть профиль Найти все сообщения от bartonom
 
Регистрация: 05.05.2011
Сообщений: 48

jquery - не работает клик по кнопке выбора варианта
Вопрос: jquery - не работает клик по кнопке выбора варианта $var.click(function(){ …
1. Исходно выводится текущий вариант (рис.1)
Выбрать вариант Название: c1.png
Просмотров: 14

Размер: 2.8 КбВар 1 Название: c1.png
Просмотров: 14

Размер: 2.8 КбВар 2 Название: c2.png
Просмотров: 14

Размер: 2.8 КбТекущий вариант Название: c1.png
Просмотров: 14

Размер: 2.8 КбВар 4
Остаток для текущего варианта: 150 штук
Добавлено штук: Название: p1.png
Просмотров: 13

Размер: 3.1 Кб
Итого: 160 штук
Рис. 1. Показан текущий вариант

2. При выборе другого варианта (отличного от текущего) должно быть (рис.2) а остается как на рис 1
Выбрать вариант Название: c1.png
Просмотров: 14

Размер: 2.8 КбВар 1 Название: c2.png
Просмотров: 14

Размер: 2.8 КбВар 2 Название: c1.png
Просмотров: 14

Размер: 2.8 КбТекущий вариант Название: c1.png
Просмотров: 14

Размер: 2.8 КбВар 4
Квота для выбранного варианта: 50 штук/месяц
Добавить штук: Название: p2.png
Просмотров: 13

Размер: 3.0 Кб
Итого: 50 штук/месяц
Рис. 2. Показан вариант 2

3. При возврате к текущему варианту, вновь должно быть как на рис.1

Суть проблемы:
В IE9 это не срабатывает. То есть при клике, например, по кнопке 'Вар 2' – ожидаемого изменения названий строк и соотв. значений (с первого клика) не происходит. Только со второго. В других браузерах: Google Chrome, Opera, Mozilla – работает как надо.

Примечание:
замечено, если вставить пустой alert() в коде member.js ( строка 66) – то работает и в IE9.
Непонятно как alert-то влияет на это ?!

Исходники в трех файлах member.js, index.php, memver.php ниже :
Файл member.js
// member.js - JavaScript Document
// присоединяется к файлу mrmber.php.   

$(document).ready(function(){
 var $item_sel = $("#item");  // указатель на "select" с id = "item" выбора числа доп. штук
 var $var  = $("input:radio[name='var']");    	 
 var active = $("#active").val();    // текущ. вариант
 var curVar = active;         
 var $quota = $("#quota-container");    
var activeLim  = parseInt($("#activeLim").val());   // лимит штук 
var selOptIndAct = parseInt($("#selOptIndAct").val());         // индекс, помеч. опции 
 var itemValAct = parseInt($("#item option:selected").val()); // (знач. опции активного вар) 
 var curItemVal = itemValAct;    // текущее знач.  (кол-во доп. штук)
 var curLim = activeLim; // текущее знач. (max штук по варианту)
 var curQuotaTotal    = curItemVal + curLim; // итоговое знач
  limItemStr = $("#lim").val();    // знач.строки лимита штук
 var limItem          = limItemStr.split(',')   // массив знач. лимита штук
 var limItem_count    = limItem.length;        
  for(i=0; i<limItem_count; i++) {
  limItem[i]          = parseInt(limItem[i])   
 }    	
 
 $item_sel.change(function() { // при изм. знач. select с id="item" 
  curItemVal   = $("#item option:selected").val();  // выбор кол-ва дополн. штук) 
  curItemVal   = parseInt(curItemVal);
  curQuotaTotal = curItemVal + curLim;     // знач. итоговой квоты 
  alert('curQuotaTotal = '+curQuotaTotal);
  $("#curQuotaSum").text(curQuotaTotal + ' предложений/месяц');   // добавляем текст с новым значением квоты
 });


 $var.click(function(){   // клик по кнопке выбора варианта
  curVar = $(this).attr("value");   //название варианта 
  if (curVar == active) {                                      			// #1, ЕСЛИ КЛИКНУТА РАДИОКНОПКА АКТИВНОГО варианта 
   curLim  = activeLim;  // текущее знач. (max штук по варианту)
   varQuota = curLim +' штук';                        			// строка с знач. квоты штук
   curQuotaTotal  = itemValAct + curLim;  // знач. итоговой квоты для активн. варианта
   textQuota = 'Остаток для текущего варианта:'   // текст для квоты штук
   textCurAddQuota   = 'Добавлено штук:'    // текст для добавляемых штук
   textCurQuotaSum   = curQuotaTotal + ' штук:'   // текст для суммарного знач. кол-ва штук для активного варианта 
   $('#item option:eq('+selOptIndAct+')').attr('selected', 'selected'); //  выбрать опцию, с индексом = selOptIndAct   
  } else {                                                     			// #1 ИНАЧЕ, ВЫБРАН НЕ АКТИВНЫЙ ВАРИАНТ      
   $('#item option:first').attr('selected', 'selected');  //выбрать первую опцию с индексом = 0)
   switch (curVar) {                                      
    case "Вар 1":  curLim = limItem[0]; break;
    case "Вар 2":  curLim = limItem[1]; break;
    case "Вар 3":  curLim = limItem[2]; break;
    case "Вар 4":  curLim = limItem[3]; break;
   } 
   textQuota = 'Квота для выбранного варианта:'  // строка с текстом для квоты штук
   textCurAddQuota  = 'Добавить штук:'  // строка с текстом для дополнительных штук
   varQuota         = curLim+' штук/месяц'; // формируем строку со значением квоты штук вновь выбранного варианта 
   curQuotaTotal    = curLim;                                 
   textCurQuotaSum   = curQuotaTotal+' штук/месяц';   // строка с текстом для итогового (суммарного) значения кол-ва штук для вновь выбранного варианта
 } // end #1 

   	// alert();                                             // при вставке пустого alert все работает как надо ?! 

    $("#curQuotaContainer").text(textQuota);   	     	    // вставляем строку с текстом для квоты штук              (содержимое span с id = "curQuotaContainer")
    $("#curAddQuota").text(textCurAddQuota);   	     	    // вставляем строку с текстом для добавляемых штук        (содержимое span с id = "curAddQuota")
    $("#curQuota").text(varQuota);   	     	            // planQuota вставляем строку со значением квоты штук действ. акт. варианта (содержимое span с id = "curQuota")  
    $("#curQuotaSum").text(textCurQuotaSum);   	     	    // textCurQuotaSum  вставл. стр. с итоговым знач. квоты штук действ. акт. варианта (содержимое span с id = "curQuotaSum")  

	
 });  // end $var.click(function()
 
 
 
});


Файл index.php
<?php
$lim          = array( 'Штук (квота/месяц)', 10, 50, 150,  250 );  // исх. лимит  (для  'Вар 1','Вар 2','Вар 3','Вар 4')
$limStr       = $lim[1].",".$lim[2].",".$lim[3].",".$lim[4];       // строка со значениями лимита штук
			   
$textVar      = array( 'Выбрать вариант', 'Вар 1', 'Вар 2', 'Вар 3', 'Вар 4');
$active       = 'Вар 3';                   			       // название активного варианта исходно
$addItem      = 10;                   		               // добавлено штук исходно для активного варианта
$opt          = array(0, 5, 10, 20, 30, 40, 50);           // массив со значениями опций
$opt_count    =  count($opt);                              // кол-во опций выбора пакетов дополнительных штук

foreach($opt as $key => $val) {
 if ($addItem == $val) {	                               // если кол-во добавл. штук равно значению текущей опции
 $selOpt[$key] = "selected";                               // опцию выделяем
 $selOptIndAct = $key;                                     // индекс помеченной опции активного варианта запоминаем
 }
}

switch ($active) {
 case "Вар 1":  
   $activeLim  = $lim[1];
   $curVar[1]=$active; 
   $member[1] = "checked"; 
 break;   
 case "Вар 2":  
  $activeLim  = $lim[2];  
  $curVar[2]=$active; 
  $member[2] = "checked"; 
 break; 
 case "Вар 3": 
  $activeLim  = $lim[3];  
  $curVar[3]=$active; 
  $member[3] = "checked"; 
 break; 
 case "Вар 4": 
  $activeLim  = $lim[4];
  $curVar[4]=$active; 
  $member[4] = "checked"; 
 break; 
 default: 
  $active=""; 
}  // end switch 	 

$totalLim  = $activeLim + $addItem;                          // итоговый лимит штук активного варианта

?>
<!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>Варианты</title>
  <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
</head>

<body>
 <?php  require_once("member.php");  ?>   
</body>
</html>


Файл member.php
<script type="text/javascript" src="js/member.js"></script>
<table style="width:30%; padding: 20px;"> 
 <tr>

<?php
for($col = 0; $col < 5; $col++) {
     if ($col > 0) { $radio = "<input type='radio'".$member[$col]." name='var' value = '".$textVar[$col]."'/>"; }
     if ($curVar[$col] == $active  && $active != "") {   			// если текущий вариант является уже выбранным и если он не пустой
	   $text = " Текущий вариант"; 
     } else {
  	   $text = " ".$textVar[$col]; 
     } 
     echo "<td>".$radio.$text."</td>";  
   }

?>
</tr>
</table>

<div id="quota-container">    <!-- #1 -->
   <span id="curQuotaContainer"> Остаток для текущего варианта: </span>    
   <span id="curQuota">  <?php echo $activeLim." шт."; ?> </span> 
   <br />

   <span id="curAddQuota"> Добавлено штук: </span>
   <span>
    <select name = 'item' id='item'>
<?php
for ($i=0; $i < $opt_count; $i++) {
       echo "<option value = '".$opt[$i]."' ".$selOpt[$i]."> ".$opt[$i];       // выводим список опций шт. 
	  }

?>
	</select>
   </span> <br /> 
  <span>
    Итого:
    <span id="curQuotaSum">
	  <?php echo $totalLim ?> штук
    </span>
  </span>   
</div> <!-- end #1  div#quota-container -->

<form name='servData' action='servData.php' method='post'>
 <input type="hidden" name="active"  id="active"  value="<?php echo $active  ?>" />  <!--  назв актив.варианта                                      -->
 <input type="hidden" name="activeLim" id="activeLim" value="<?php echo $activeLim ?>" />  <!--  лимит шт. активного варианта -->
 <input type="hidden" name="addItem"  id="addItem" value="<?php echo $addItem ?>" />  <!--  кол-во, доп. для активного действующего варианта,  шт.    --> 
 <input type="hidden" name="selOptIndAct" id="selOptIndAct"  value="<?php echo $selOptIndAct  ?>" />  <!--  индекс помеченной опции активного варианта --> 
 <input type="hidden" name="lim"  id="lim"  value="<?php echo $limStr       ?>" />
</form>
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Клик срабатывает без щелчка на кнопке - почему?.. deivan Events/DOM/Window 3 13.08.2012 14:42
не работает метод offset() jQuery cyber Events/DOM/Window 3 06.08.2012 19:39
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 10:47
Select с возможностью ввода варианта выбора вручную iNfantry jQuery 10 29.01.2012 16:57
Не могу понять как работает jQuery kostiaGt jQuery 2 20.07.2008 08:42