Блог

Главная - Вопросы по программированию - как я могу переключаться между позициями, а также переключать значение ввода с тем же именем класса внутри них?

как я могу переключаться между позициями, а также переключать значение ввода с тем же именем класса внутри них?

#javascript #html #jquery

Вопрос:

У меня есть такой список:

 <ul>
  <li>1 
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="1"></input>
  </li>
  <li>2
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="2"></input>
  </li>
  <li>3 
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="3"></input>
  </li>
  <li>4 
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="4"></input>
  </li>
</ul>

Я хочу переключать позиции вверх или вниз.

Я делаю это с помощью этого кода

 $(function() {
  $('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
  })
  $('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
  })
})

Но как я могу изменить значение входных данных (с тем же именем класса) для каждого щелчка вверх или вниз?
Примечание: я получаю доступ только к имени класса для входных данных.(не идентификатор или имя ввода).

это живая демонстрация

Комментарии:

1. Можете ли вы объяснить больше?

2. @Allan не могли бы вы, пожалуйста, проверить живую демонстрацию? например, если я переключу номер 4 на up, я также хочу изменить значение ввода в разделе номер 4 <li> на значение ввода в разделе номер 3 <li>.

3. Теперь я должен работать.

Ответ №1:

Используйте эту функцию для обновления значений:

 function changevalue(){
var menus = document.getElementsByClassName("order");
for (var i = menus.length - 1; i >= 0; i--)
{
menus[i].value = i 1;
}
}

Попробуйте это:

 $(function() {
  $('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
    changevalue();
  })
  $('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
    changevalue();
  })
})
function changevalue(){
var menus = document.getElementsByClassName("order");
for (var i = menus.length - 1; i >= 0; i--)
{
menus[i].value = i 1;
}
} 
 ul li:first-child a.up,
ul li:last-child a.down {
  display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>

<li>1 
      <a class='up' href='#'>up</a> 
      <a class='down' href='#'>down</a>
      <input type="hidden" class="order" value="1"/>
</li>

<li>2 
      <a class='up' href='#'>up</a> 
      <a class='down' href='#'>down</a>
      <input type="hidden" class="order" value="2"/>
</li>
 
<li>3 
     <a class='up' href='#'>up</a> 
     <a class='down' href='#'>down</a>
     <input type="hidden" class="order" value="3"/>
</li>
 
<li>4 
    <a class='up' href='#'>up</a> 
    <a class='down' href='#'>down</a>
    <input type="hidden" class="order" value="4"/>
</li>

<li>5 
    <a class='up' href='#'>up</a> 
    <a class='down' href='#'>down</a>
    <input type="hidden" class="order" value="5"/>
</li>

<li>6 
    <a class='up' href='#'>up</a> 
    <a class='down' href='#'>down</a>
    <input type="hidden" class="order" value="6"/>
</li>

</ul>

Ответ №2:

Попробуйте это:

     $(function () {
        $('.up').on('click', function (e) {
            var wrapper = $(this).closest('li')
            wrapper.insertBefore(wrapper.prev())
        })
        $('.down').on('click', function (e) {
            var wrapper = $(this).closest('li')
            wrapper.insertAfter(wrapper.next())
        })
        $('.down,.up').click(function(){
            var inputs = $(this).parents('ul').find('.order');
            $.each(inputs, function (i, input) {
                $(input).val(i   1);
            });
        });
    }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>1
        <a class='up' href='#'>up</a>
        <a class='down' href='#'>down</a>
        <input type="hidden" class="order" value="1"></input>
    </li>
    <li>2
        <a class='up' href='#'>up</a>
        <a class='down' href='#'>down</a>
        <input type="hidden" class="order" value="2"></input>
    </li>
    <li>3
        <a class='up' href='#'>up</a>
        <a class='down' href='#'>down</a>
        <input type="hidden" class="order" value="3"></input>
    </li>
    <li>4
        <a class='up' href='#'>up</a>
        <a class='down' href='#'>down</a>
        <input type="hidden" class="order" value="4"></input>
    </li>
</ul>
Метки: ,