Форум

new_guy · #1 (**permalink**) 14.10.2014, 07:34

Добрый день!
Подскажите пожалуйста, есть текстовое поле с числом, по бокам от него стоят 2 ссылки (+ и -) при нажатии на ссылку происходит +/- 1. Для 1 го текстового поля я сделал, но их несколько и думаю не правильно для каждого писать отдельную функцию. Еще в другом блоке должно выводиться значение суммы все полей.
вот само текстовое поле:

<div class="counter">
    <a href="#" class="decrement" onclick=' plus_or_minus("-")'>-</a>
    <input ID="kol_polos" type="text" value="1" style="width: 40px;" oninput='plus_or_minus("NoN")'/>
    <a href="#" class="increment" onclick='plus_or_minus("+")'>+</a>
</div>

и функция:

//Count total price
function count_price(sign){
  $('#total_poloci').text(sign);
}

//Check values when +/- pressed
function plus_or_minus(way){
  var inc_dec = parseInt($('#kol_polos').val());

    if (way == "+"){
      inc_dec ++;

    }else if (way == "-"){
      inc_dec --;
    }

    count_price(inc_dec);
}

ksa · #2 (**permalink**) 14.10.2014, 08:09

new_guy, если аргументом передавать не строки, а +1 и -1 - будет гораздо симпатичнее...

Альтернативный вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	$('.calc').click(function (){
		var o=$(this).parent().find('input');
		var val=parseInt(o.val());
		var i=($(this).hasClass('increment'))? 1: -1;
		o.val(val+i);
	});
});
</script>
</head>
<body>
<div class="counter">
    <a href="#" class="calc decrement">-</a>
    <input ID="kol_polos" type="text" value="1" style="width: 40px;" />
    <a href="#" class="calc increment">+</a>
</div>

</body>
</html>

kostyanet · #3 (**permalink**) 14.10.2014, 10:02

href="#" не нужен, просто добавьте cursor:pointer в css на а и все.

danik.js · #4 (**permalink**) 14.10.2014, 10:34

Сообщение от kostyanet

href="#"

Эта шняга вобще бесит.
Как будто кроме ссылок ничего не знаете. Прикладной прогер бы без раздумий кинул кнопку.
Ну если уж сильно хочется ссылку - то почему бы не написать честно href="javascript:"

А # - это ссылка на пустой несуществующий якорь на текущей страницы. Если не превентить onclick то страницу бросит вверх.

hfts_rider · #5 (**permalink**) 14.10.2014, 11:07

Сообщение от danik.js

Эта шняга вобще бесит.
Как будто кроме ссылок ничего не знаете. Прикладной прогер бы без раздумий кинул кнопку.
Ну если уж сильно хочется ссылку - то почему бы не написать честно href="javascript:"

А # - это ссылка на пустой несуществующий якорь на текущей страницы. Если не превентить onclick то страницу бросит вверх.

Даже если и с "onclick", все равно бросит вверх, но тут на помощь приходят "return false;" в конце или "preventDefault();" вначале" ))

hfts_rider · #6 (**permalink**) 14.10.2014, 11:08

Я помню до того как узнал это, так сильно парился с этим сбрасыванием вверх страницы при нажатии на ссылку)

danik.js · #7 (**permalink**) 14.10.2014, 11:09

Сообщение от danik.js

превентить

От слова prevent ) То есть preventDefault()

danik.js · #8 (**permalink**) 14.10.2014, 11:10

Сообщение от hfts_rider

Я помню до того как узнал это, так сильно парился с этим сбрасыванием вверх страницы при нажатии на ссылку)

А все потому что какой-то недоразвитый вбросил это гавно с решеткой. Теперь все юзают, даже не понимая зачем оно нужно и насколько оно костыльно.

kostyanet · #9 (**permalink**) 14.10.2014, 11:33

HTMLElement.blur()
Removes keyboard focus from the currently focused element.
HTMLElement.click()
Sends a mouse click event to the element.
HTMLElement.focus()
Makes the element the current keyboard focus.

все без пробирок, конкретно про щелчок https://developer.mozilla.org/en-US/...LElement.click

Так что ~~скрипач~~ а не нужен.

Форум

Справочник

Discord чат

Курсы javascript