Как заставить сортируемую работу работать с несколькими элементами div с одинаковым именем класса - PullRequest
Новая
       30

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

0 голосов
/ 16 марта 2019

Как заставить эту сортируемую работу работать для мультидивов с одинаковым именем класса # sortable.

вот пример

обновление 

      <div class="multi-fields" id="sortable">
          //something
      </div>

      <div class="multi-fields" id="sortable">
          //another something
      </div>

1012 * сортировка * 

<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
jQuery(document).ready(function($) { 
    $("#sortable").sortable({
        cursor:'move',
        opacity: 0.5,
        cursor: 'pointer',
        axis: 'y',
        update:function(event, ui){
    var order = $('#sortable').sortable('serialize');
    $.ajax({
        type: "POST",
        url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
        data: "action=update_field_order&" + order
        });
    }});
    $("#sortable").disableSelection();
});
</script>

Ответы [ 2 ]

1 голос
/ 16 марта 2019
  1. $("#sortable") выберет все теги с идентификатором, равным «сортируемым», а НЕ классам.
  2. Проверьте вашу консоль.Получаете ли вы какие-либо ошибки относительно .sortable?
  3. Имя класса '#sortable' недопустимо.Измените его на «сортируемый» и измените селектор на $(".sortable").Это работает сейчас?

РЕДАКТИРОВАТЬ Если быть точным, (3) действительно в HTML5.Тем не менее, лучшая практика - начинать имена классов / идентификаторов с буквы.В случае, если вам нужно использовать «#», вам нужно будет экранировать его в селекторе jQ.Это ненужная путаница.

0 голосов
/ 16 марта 2019

Я думаю, вы могли бы сказать это: 

    <script type="text/javascript">
      var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
      jQuery(document).ready(function($) { 
      $(".sortable").sortable({
      cursor:'move',
      opacity: 0.5,
      cursor: 'pointer',
      axis: 'y',
      update:function(event, ui){
       var order = $('.sortable').sortable('serialize');
      $.ajax({
        type: "POST",
        url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
        data: "action=update_field_order&" + order
      });
      }});
      $(".sortable").disableSelection();
      });
      </script>

Измените также атрибут id на class и попробуйте!

...