Как преобразовать счетчик к нужному виду?
Всем привет. У меня есть счетчик, подсчитывающий количество и сумму конкретной продукции. В span с классом quantity хранится количество и сумма в виде "13 x 70 руб." input c type="number" должно получать значение quantity, т.е. цифру 13. input c type="button" увеличивают/уменьшают значение переменной input c type="number", что должно также отражаться в quantity, а сумма в amount перезаписываться в полном виде, т.е. сумма= 13*70 = 910 руб Сложность в преобразовании строк в значения и в автоматическом отслеживании изменений с обменом информации между селекторами. В коде написал смысл того, что хочу получить. Поможете в преобразовании?
<span class="quantity">13 × <span class="amount">70 руб.</span></span> <div class="quantity buttons_added"> <input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4"> <input type="button" value="+1" id="button_plus" class="plus"> <input type="button" value="-1" id="button_minus" class="minus"> </div>
var quantity = $(".quantity").text();
$(".input-text.qty.text").val(quantity);
var amount = $(".amount").text();
var total = amount * quantity;
$(".quantity").text() = $(".input-text.qty.text").val(quantity);
$(".amount").text() = total;
|
ligisayan,
может использовать data атрибут для хранения констант, а не текст? |
Цитата:
|
ligisayan,
а виджет инициализирует злой волшебник :cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.amount {
color: #FF0000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var quantity = $(".quantity").text().match(/\d+/g),
max = +$(".input-text.qty.text").attr("max"),
min = +$(".input-text.qty.text").attr("min");
function fn() {
quantity[0] > max && (quantity[0] = max);
quantity[0] < min && (quantity[0] = min);
$(".input-text.qty.text").val(quantity[0]);
$(".amount").text(quantity[1] + " " + (quantity[0] * quantity[1]) + " руб");
$(".quantity")[0].firstChild.data = quantity[0] + " × ";
}
$(".plus, .minus").click(function() {
$(this).is(".plus") ? quantity[0]++ : quantity[0]--;
fn()
})
$(".input-text.qty.text").click(function() {
quantity[0] = this.value;
fn()
})
fn()
});
</script>
</head>
<body> <span class="quantity">13 × <span class="amount">70 руб.</span></span>
<div class="quantity buttons_added">
<input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4">
<input type="button" value="+1" id="button_plus" class="plus">
<input type="button" value="-1" id="button_minus" class="minus">
</div>
</body>
</html>
|
Цитата:
недостаточно. и второй момент у меня: если нажимаешь на "+" то прибавляет на 1, а если на "-" то сразу уменьшает на 3 единицы, а потом по одному и после, если вновь жмешь на "+" то сразу прибавляет на 3, а потом на 1. Это отчего так? у тебя в примере так не происходит.. |
Цитата:
Цитата:
что у вас в коде мне неизвестно :) |
Цитата:
var quantity = $(".li .quantity").text().match(/\d+/g) в консоли показало ["1", "360", "000"] |
ligisayan,
match(/\d+.?\d+?/g) |
Цитата:
|
ligisayan,
и что не так? |
| Часовой пояс GMT +3, время: 02:20. |