Главная страница   /   11.6. Подсчет выбранной продукции (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

11.6. Подсчет выбранной продукции

И последним изменением является подсчет общего числа выбранных в отдельных полях ввода цветов; это будет видно под каруселью с рядами. В листинге 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: Отображение итоговой суммы выбранной продукции

Эта итоговая сумма показывает общее число всех выбранных продуктов, а не только тех, которые видны на данный момент (хотя несложно использовать и другой подход).