Увеличение количества
Всем привет )
Есть форма с текстовым полем и кнопкой увеличения значения поля на 1:
<form>
<input type="text" size="5" value="1" />
<input type="button" onclick="add(this)" value="+" />
</form>
И сам js код:
function add(element){
element.parentNode.getElementsByTagName('input')[0].value = parseInt(element.parentNode.getElementsByTagName('input')[0].value) + 1;
}
Подскажите, есть ли более изящное решение и что можно поправить в этой функции? |
<input type="text" id="inp" size="5" value="1">
<input type="button" value="+"
onclick="
inp.value = parseInt(inp.value) + 1
">
|
Нет, это совсем не то, id у поля отсутствует.
Возможно добавление id к родителю, но при этом потомки будут анологичными, т.е. что то вроде этого:
<div id="parent">
<form>
<input type="text" size="5" value="1" />
<input type="button" onclick="add(this)" value="+" />
</form>
...
<form>
<input type="text" size="5" value="1" />
<input type="button" onclick="add(this)" value="+" />
</form>
</div>
|
Цитата:
Цитата:
Не очень-то понятно чего вы хотите добиться, если ваша функция делает то же самое, что и у меня обработчик onclick. Так лучше??
<div id="myDiv">
<input type="text" size="5" value="1">
<input type="button" value="+"
onclick="
myDiv.children[0].value = parseInt(myDiv.children[0].value) + 1
">
</div>
|
Элементов с формой на странице может быть довольно много и наверное правильнее написать один раз функцию, чем повторять весь этот код в событии. Как раз id тем же и плох, то что как то неразумно задавать к примеру 100 элементам разные id. По классу же слишком сложная выборка, поэтому и приходится извращаться с DOM деревом и фунцией.
Цитата:
|
Цитата:
<div id="myDiv"
onclick = "
var a = this.getElementsByTagName('input');
var e = event.srcElement || event.target;
if (e.type == 'button') {
for (i=0; i<a.length; i++) {
if (a[i] == e) {
a[i-1].value = parseInt(a[i-1].value) + 1;
break;
}
}
}
">
<input type="text" size="5" value="1">
<input type="button" value="+">
<input type="text" size="5" value="1">
<input type="button" value="+">
</div>
<!--для этого не сработает, так как он вне div-->
<input type="text" size="5" value="1">
<input type="button" value="+">
Если хотите вынесите код обработчика в функцию. |
Цитата:
к примеру, могу увеличить поле до 5, а уменьшить только до 1 |
Цитата:
<input type="text" id="inp" size="5" value="1">
<input type="button" value="+"
onclick="
inp.value = parseInt(inp.value) >= 5 ? '5' : (parseInt(inp.value) < 1 ? '1' : parseInt(inp.value) + 1)
">
осталось только сделать вторую кнопку и присобачить к ней соответствующее условие для уменьшения значения |
Цитата:
(parseInt(inp.value) <= 1 ? '1' при < 1 минусует не правильно. сперва уменьшается до нуля, потом единица |
Цитата:
<img src="-.jpg" class="onclick" onclick="inp.value = parseInt(inp.value) <= 1 ? '1' : parseInt(inp.value) - 1"/> или оформите в виде функции и передавайте туда в качестве параметров пороги (1,5 или др...) |
<img src="http://javascript.ru/forum/images/smilies/sad.gif" class="onclick" onclick="inp.value = ~~inp.value <= 1 ? 1 : ~~inp.value - 1"/> <input tape="text" id="inp" value="1" class="input"> <img src="http://javascript.ru/forum/images/smilies/smile.gif" class="onclick" onclick="inp.value = ~~inp.value >= 5 ? 5 : ~~inp.value + 1"/> |
Цитата:
|
Цитата:
при <= все работает как вы и хотели... |
да, работает как я и хотел. я об этом написал и поправил Вас http://javascript.ru/forum/misc/2818...tml#post185814
|
<div id="myDiv">
<input type="button" value="-">
<input type="text" id="inp" size="1" value="1" disabled>
<input type="button" value="+"><br>
<input type="button" value="-">
<input type="text" id="inp" size="1" value="1" disabled>
<input type="button" value="+"><br>
<input type="button" value="-">
<input type="text" id="inp" size="1" value="1" disabled>
<input type="button" value="+"><br>
</div>
<script>
window.onload = function () {
var myDiv = document.getElementById('myDiv');
var inp;
myDiv.onclick = function (e) {//onclick begin
e = e || event
var target = e.target || e.srcElement;
if (target.value == '+') {
inp = target.previousSibling.previousSibling;//previousElementSibling лучше, но не для IE<9
if (parseInt(inp.value) < 5) {
inp.value = parseInt(inp.value) + 1;
}
} else if (target.value == '-') {
inp = target.nextSibling.nextSibling;//nextElementSibling лучше, но не для IE<9
if (parseInt(inp.value) > 1) {
inp.value = parseInt(inp.value) - 1;
}
}
}//onclick end
}
</script>
|
Для хрома и оперы
<input type="number" value="1" min="1" max="5"> |
Цитата:
function add(element){
element.parentNode.getElementsByTagName('input')[0].value++;
}
|
Здравствуйте!
Скрипт
$(function() {
$('#exadd').click(function() {
$("#experson").clone().appendTo("#exdiv");
return false;
});
$("a[rel='exremove']").live('click', function(event) {
$(this).parent().remove();
});
});
Код <div id="items"> <ul class="tabs"> <li><a href="#tabs-example">Профиль 1</a></li> <li><a href="#tabs-left">Профиль 2</a></li> <div id="exdiv"> <div id="experson"> <li><a href="#tabs-example" name="experson[]" >Профиль 3</a></li> </div> </div> <li><a href="#" id="exadd" onclick="experson; inp.value = parseInt(inp.value) >= 5 ? '5' : (parseInt(inp.value) < 1 ? '1' : parseInt(inp.value) + 1)">+</a></li> </ul> </div> <input type="text" id="inp" size="5" value="1"> Как исправить код, чтобы при нажатии на + добавлялся новый элемент таба с надписью "Профиль 1", "Профиль 2", "Профиль 3"... и т.д до "Профиль 20". Новые элементы создаются только с надписью "Профиль" без числа. |
tomas_morgam,
заведите счётчик - досчитал до 20 return в click - в клоне ищите ссылку и меняйте текст как вам нужно добавляя значение счётчика. |
Подскажите, пожалуйста, где и на что заменить. Исходник взял с сайта, сам почти не знаю js. Счетчик не могу создать и вывести значение рядом с "Профиль".
|
tomas_morgam,
примерно так ... не считая непонятных остатков кода ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(function() { var n = 3;
$('#exadd').click(function() { if(n > 19) return;
$("#experson").clone().appendTo("#exdiv").find('a').text('Профиль '+ (++n));
return false;
});
});
</script>
</head>
<body>
<div id="items">
<ul class="tabs">
<li><a href="#tabs-example">Профиль 1</a></li>
<li><a href="#tabs-left">Профиль 2</a></li>
<div id="exdiv">
<div id="experson">
<li><a href="#tabs-example" name="experson[]" >Профиль 3</a></li>
</div>
</div>
<li><a href="#" id="exadd" >+</a></li>
</ul>
</div>
<input type="text" id="inp" size="5" value="1">
</body>
</html>
|
А можна его засунуть в ul, чтобы табы создавались подряд в строке, а не переносились в новую строку?
<ul class="tabs"> <li><a href="#tabs-example">Профиль 1</a></li> <li><a href="#tabs-left">Профиль 2</a></li> <div id="exdiv"> <div id="experson"> <li><a href="#tabs-example" name="experson[]" >Профиль 3</a></li> </div> </div> <li><a href="#" id="exadd" >+</a></li> </ul> |
Цитата:
может сначала доку почитать тут потом сами засуните куда вам надо и непонятно зачем вам li в диве. |
Цитата:
<div id="items"> <ul class="tabs"> <li><a href="#tabs-example">Профиль 1</a></li> <li><a href="#tabs-example1" name="experson[]" >Профиль 2</a></li> <li><a href="#" id="exadd" >+</a></li> </ul> </div> Измененный скрипт
$(function() { var n = 2;
$('#exadd').click(function() { if(n > 19) return;
$("#experson").clone().appendTo("#tabs").find('a').text('Профиль '+ (++n));
return false;
});
});
|
tomas_morgam,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(function() { var n = 2;
$('#exadd').click(function() { if(n > 19) return;
var prev = $(this).parent().prev();
prev.clone().insertAfter(prev).find('a').text('Профиль '+ (++n));
return false;
});
});
</script>
</head>
<body>
<div id="items">
<ul class="tabs">
<li><a href="#tabs-example">Профиль 1</a></li>
<li><a href="#tabs-example1" name="experson[]" >Профиль 2</a></li>
<li><a href="#" id="exadd" >+</a></li>
</ul>
</div>
</body>
</html>
|
Огромное списибо!!! :) Простите за беспокойство.
|
| Часовой пояс GMT +3, время: 14:08. |