Форумы портала PHP.SU :: Версия для печати :: поменять местами кнопки

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: поменять местами кнопки

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » поменять местами кнопки

Страниц (1): [1]

1. alexiy - 13 Декабря, 2012 - 13:52:02 - перейти к сообщению

есть

CODE (html):
скопировать код в буфер обмена

 
<input type = "button" value = "1">
<input type = "button" value = "2">
<input type = "button" value = "3">
 

необходимо при нажатии на любую из кнопок, поменять кнопки местами в порядке 2,1,3 потом при нажатии на любую из кнопоко порядок должен быть 3,2,1
как это можно реализовать используя JQuery?

2. armancho7777777 - 13 Декабря, 2012 - 14:22:15 - перейти к сообщению

CODE (javascript):
скопировать код в буфер обмена

$(function(){
 
  $('input:button').click(function(e) {
  
    $(this).parent().prepend($(this));
        
  });
   
});

CODE (html):
скопировать код в буфер обмена

<div>
  <input type="button" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
</div>

3. DelphinPRO - 13 Декабря, 2012 - 14:33:36 - перейти к сообщению

CODE (javascript):
скопировать код в буфер обмена

 
$(this)                       // берем кнопку, которую нажали
.siblings('input[type=button]') // ищем все соседние кнопки
.last()                 // из полученного набора берем последний элемент
.prependTo(             // и перемещаем его на первое место
    $(this).parent()    // у родительского элемента
);

4. IllusionMH - 13 Декабря, 2012 - 14:39:04 - перейти к сообщению

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

CODE (javascript):
скопировать код в буфер обмена

$('input').on("click", function() {
    $(this).parent().children().last().prependTo($(this).parent());
});

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

5. alexiy - 23 Декабря, 2012 - 13:41:28 - перейти к сообщению

IllusionMH
поясняю:

CODE (html):
скопировать код в буфер обмена

 
<input type = "button" value = "1"><br>
<input type = "button" value = "2"><br>
<input type = "button" value = "3"><br>
 

нажали на любу кнопку порядок стал таким

CODE (html):
скопировать код в буфер обмена

 
<input type = "button" value = "2"><br>
<input type = "button" value = "3"><br>
<input type = "button" value = "1"><br>
 

нажали еще раз

CODE (html):
скопировать код в буфер обмена

 
<input type = "button" value = "3"><br>
<input type = "button" value = "1"><br>
<input type = "button" value = "2"><br>
 

еще раз нажали

CODE (html):
скопировать код в буфер обмена

 
<input type = "button" value = "1"><br>
<input type = "button" value = "2"><br>
<input type = "button" value = "3"><br>
 

6. armancho7777777 - 23 Декабря, 2012 - 13:52:57 - перейти к сообщению

Не прошло и года )

CODE (javascript):
скопировать код в буфер обмена

 
$(function(){
    
        var btns = $('input:button'),
            btnsParent = btns.parent();
        
        btns.click(function(e) {
                btnsParent.append(
                        btnsParent.find(':button').first()
                );
        });
});
 

CODE (html):
скопировать код в буфер обмена

 
<div>
  <input type="button" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
</div>
 

7. IllusionMH - 23 Декабря, 2012 - 15:41:12 - перейти к сообщению

alexiy, а посмотрите на варианты в первом посте, они отличаются.
А теперь всегда выполняется сдвиг первого элемента в конец (вот так и стоило написать сразу, а не неправильные последовательности).

8. armancho7777777 - 23 Декабря, 2012 - 15:45:33 - перейти к сообщению

IllusionMH, то, что Вы ему написали, но наоборот )
А ТС разбираться не любит: запустил, результат не тот, обратно на форум)