Pro jQuery
Адам Фриман
Подсчет выбранной продукции
И последним изменением является подсчет общего числа выбранных в отдельных полях ввода цветов; это будет видно под каруселью с рядами. В листинге 11-7 показаны изменения в скрипте.
Листинг 11-7: Подсчет всей продукции
<script type="text/javascript">
$(document).ready(function () {
var fNames = ["Carnation", "Lily", "Orchid"];
var fRow = $('<div id=row3 class=drow/>').appendTo('div.dtable');
var fTemplate = $('<div class=dcell><img/><label/><input/></div>');
for (var i = 0; i < fNames.length; i++) {
fTemplate.clone().appendTo(fRow).children()
.filter('img').attr('src', fNames[i] + ".png").end()
.filter('label').attr('for', fNames[i]).text(fNames[i]).end()
.filter('input').attr({ name: fNames[i], value: 0, required: "required" })
}
$('<a id=left></a><a id=right></a>')
.prependTo('form')
.css({
"background-image": "url(leftarrows.png)",
"float": "left",
"margin-top": "15px",
display: "block", width: 50, height: 50
})
.click(handleArrowPress)
.hover(handleArrowMouse)
$('#right').css("background-image", "url(rightarrows.png)").appendTo('form');
$('h1').css({ "min-width": "0", width: "95%", });
$('#row2, #row3').hide();
$('#oblock').css({ float: "left", display: "inline", border: "thin black solid" });
$('form').css({ "margin-left": "auto", "margin-right": "auto", width: 885 });
var total = $('#buttonDiv')
.prepend("<div>Total Items: <span id=total>0</span></div>")
.css({ clear: "both", padding: "5px" });
$('<div id=bbox />').appendTo("body").append(total).css("clear: left");
$('input').change(function (e) {
var total = 0;
$('input').each(function (index, elem) {
total += Number($(elem).val());
});
$('#total').text(total);
});
function handleArrowMouse(e) {
var propValue = e.type == "mouseenter" ? "-50px 0px" : "0px 0px";
$(this).css("background-position", propValue);
}
function handleArrowPress(e) {
var elemSequence = ["row1", "row2", "row3"];
var visibleRow = $('div.drow:visible');
var visibleRowIndex = jQuery.inArray(visibleRow.attr("id"), elemSequence);
var targetRowIndex;
if (e.target.id == "left") {
targetRowIndex = visibleRowIndex - 1;
if (targetRowIndex < 0) { targetRowIndex = elemSequence.length - 1 };
} else {
targetRowIndex = (visibleRowIndex + 1) % elemSequence.length;
}
visibleRow.fadeOut("fast", function () {
$('#' + elemSequence[targetRowIndex]).fadeIn("fast")
});
}
});
</script>
В этом дополнении я выбираю элементы input
и регистрирую функцию обработки событий, которая получает значения каждого из них, суммирует их и устанавливает их в качестве контента элементу span
, который я добавил раньше. Результат можно увидеть на рисунке 11-9.
Рисунок 11-9: Отображение итоговой суммы выбранной продукции
Эта итоговая сумма показывает общее число всех выбранных продуктов, а не только тех, которые видны на данный момент (хотя несложно использовать и другой подход).