Создание кнопок [закрыт]

69
13 октября 2021, 13:40
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

Cоздать 3 кнопки с названиями 1, 2, 3, расположенные друг над другом. Начальный вид: 1 2 3 Нажали на любую кнопку, меняется порядок на: 2 3 1 Нажали на любую кнопку, меняется порядок на: 3 1 2

Нажали на любую кнопку, меняется порядок на: 1 2 3 Код должен быть написан с ипользованием библиотеки jQuery.

Я не знаю как менять порядок. Подскажите пожалуста. Спасибо

Answer 1

$('.test').on('click', function(){ 
  $(this).parent().append( $('.test')[0] ); 
});
.mama { 
  display: inline-flex; 
  flex-direction: column; 
} 
 
.test { margin: 3px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="mama"> 
  <button class="test">1</button> 
  <button class="test">2</button> 
  <button class="test">3</button> 
</div>

Вот настолько просто)) $(this) - элемент, который запустил функцию (на который кликнули). Находим его родительский блок и пере-добавляем в него первую кнопку через append, и она оказывается в конце.

Перевод на JS:

let test = document.querySelectorAll('.test'); 
 
for( let i = 0; i < test.length; i++ ){ 
  test[i].addEventListener('click', function(){ 
    let first = this.parentNode.children[0]; 
    this.parentNode.appendChild( first ); 
  }); 
}
.mama { 
  display: inline-flex; 
  flex-direction: column; 
} 
 
.test { margin: 3px; }
<div class="mama"> 
  <button class="test">1</button> 
  <button class="test">2</button> 
  <button class="test">3</button> 
</div>

Answer 2

let mas = [ 
    [1, 2, 3], 
    [2, 3, 1], 
    [3, 1, 2] 
  ], 
  inc = 3; 
 
$('button').click(butFunc); 
 
function butFunc() { 
  --inc == -1 ? inc = 2 : inc; 
  $('button').each(function(i, val) { 
    $(this).attr('title', `кнопка ${mas[inc][i]}`).text(mas[inc][i]); 
  }); 
}
button { 
  background: #0084ff; 
  border: none; 
  border-radius: 5px; 
  padding: 8px 14px; 
  font-size: 15px; 
  color: #fff; 
  cursor: pointer; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button title="кнопка 1">1</button> 
<button title="кнопка 2">2</button> 
<button title="кнопка 3">3</button>

Как то так, это конкретно при ваших условиях 1,2,3; 2,3,1; 3,1,2. Если вы хотите генерировать произвольные числа то это другой вопрос.

Answer 3

$('.test').on('click', function(){ 
  $(this).parent().append( $('.test')[0] ); 
});
.mama { 
  display: inline-flex; 
  flex-direction: column; 
} 
 
.test { margin: 3px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="mama"> 
  <button class="test">1</button> 
  <button class="test">2</button> 
  <button class="test">3</button> 
</div>

$('button').click(butFunc); 
 
function butFunc() { 
  $('.mama').append($('button').first()); 
}
button { 
  background: #0084ff; 
  border: none; 
  border-radius: 5px; 
  padding: 8px 14px; 
  font-size: 15px; 
  color: #fff; 
  cursor: pointer; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="mama"> 
  <button title="кнопка 1">1</button> 
  <button title="кнопка 2">2</button> 
  <button title="кнопка 3">3</button> 
</div>

Тогда ещё проще))

Answer 4

Держите, пользуйтесь :)

//Функция которая изменяет значения кнопок 
function clickFunction() { 
  if($('#firstButton').val() == "1") { 
    $('#firstButton').val("2"); 
    $('#secondButton').val("3"); 
    $('#thirdButton').val("1"); 
  } 
  else if($('#firstButton').val() == "2") { 
    $('#firstButton').val("3"); 
    $('#secondButton').val("1"); 
    $('#thirdButton').val("2"); 
  } 
  else if($('#firstButton').val() == "3") { 
    $('#firstButton').val("1"); 
    $('#secondButton').val("2"); 
    $('#thirdButton').val("3"); 
  }  
 }  
 
// Вызов этой же функции 
$('#firstButton').click(clickFunction); 
$('#secondButton').click(clickFunction); 
$('#thirdButton').click(clickFunction);
<!-- Подключаем Jquery --> 
<script 
  src="https://code.jquery.com/jquery-3.4.1.min.js" 
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
  crossorigin="anonymous"></script> 
 
<!-- Ваши кнопки --> 
<input type="button" value="1" id="firstButton" /> 
<br /> 
<input type="button" value="2" id="secondButton" /> 
<br /> 
<input type="button" value="3" id="thirdButton" />

READ ALSO
React не видит значение
javascript

React не видит значение

Я подключил к своему коду CRA(create-react-app), что бы разбить приложение на модули, но за ними пошли первые проблемыСегодня хочу её решить , есть код...

 165
Что лучше new Map() или Object.create(null)?
javascript

Что лучше new Map() или Object.create(null)?

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

 191
Как заставить браузер без задержки отображать элементы добавленные в цикле javascript
javascript

Как заставить браузер без задержки отображать элементы добавленные в цикле javascript

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

 100
JavaScript TextArea
javascript

JavaScript TextArea

Пытаюсь написать скрипт который будет заполнять формуВот страница с формой https://www

 215