Вопрос: jquery - не работает клик по кнопке выбора варианта $var.click(function(){ …
1. Исходно выводится текущий вариант (рис.1)
Выбрать вариант
Вар 1
Вар 2
Текущий вариант
Вар 4
Остаток для текущего варианта: 150 штук
Добавлено штук:
Итого: 160 штук
Рис. 1. Показан текущий вариант
2. При выборе другого варианта (отличного от текущего) должно быть (рис.2) а остается как на рис 1
Выбрать вариант
Вар 1
Вар 2
Текущий вариант
Вар 4
Квота для выбранного варианта: 50 штук/месяц
Добавить штук:
Итого: 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>
