javascript - 问题排序选择选项

Question

链接的代码片段只是我正在做的事情的一个粗略示例，但将演示我遇到的问题。我有两个选择框，可以在它们之间传输项目。我需要跟踪某个项目何时从其原始框移出，以便稍后通过 ajax 调用提交更改，因为我不想在传输中包含整个列表，而只包含必要的列表。 (我的真实数据是更大的列表)

为了跟踪，我使用了数据属性“data-changed”。为了帮助反射(reflect)标记为更新的内容，我在该特定选项上切换了一个类。这一切都运行良好且花花公子。我的问题是当我尝试对这些列表进行排序时。选项按预期排序，但似乎在这个过程中丢失了其数据属性，这破坏了其他内容。我不知道如何解决这个问题。

https://jsfiddle.net/bnLfhpq4/

$('#btnSubmit').click(function(e) {
  e.preventDefault();

  var arr = new Array();

  // get options from active list
  var options = $('#activeList option');
  options.each(function(i, o) {
    if ($(o).data('changed') == "yes") {
      var skill = {
        id: $(o).val(),
        active: 0
      }
      arr.push(skill);
    }
  });


  // get options from inactive list
  var options = $('#inactiveList option');
  options.each(function(i, o) {
    if ($(o).data('changed') == "yes") {
      var skill = {
        id: $(o).val(),
        active: 1
      }
      arr.push(skill);
    }
  });

  console.log(arr);
});


$('#btn_in').click(function() {
  var options = $('#activeList option:selected');

  options.each(function(i, o) {
    var c = $(o).data('changed');
    if (c == "yes") {
      $(o).data('changed', 'no');
      $(o).removeClass('flagged');
    } else {
      $(o).data('changed', 'yes');
      $(o).addClass('flagged');
    }
  });

  $('#inactiveList').append(options);

  //sortOptions('#inactiveList');

});




$('#btn_out').click(function() {
  var options = $('#inactiveList option:selected');

  options.each(function(i, o) {
    var c = $(o).data('changed');
    if (c == "yes") {
      $(o).data('changed', 'no');
      $(o).removeClass('flagged');
    } else {
      $(o).data('changed', 'yes');
      $(o).addClass('flagged');
    }
  });

  $('#activeList').append(options);
  sortOptions('#activeList');

});





function sortOptions(selector) {
  var options = $(selector + ' option');

  options.sort(function(a, b) {
    if (a.text > b.text) return 1;
    if (a.text < b.text) return -1;
    return 0;
  });

  $(selector).empty().append(options);


}

.superSelect {
  min-height: 200px;
}

.buttons {
  display: inline-block
}

.flagged {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="activeList" class="superSelect">
  <option value="t1" data-changed="no">Option 1</option>
  <option value="t2" data-changed="no">Option 2</option>
  <option value="t3" data-changed="no">Option 3</option>
  <option value="t4" data-changed="no">Option 4</option>
</select>

<div class="buttons">
  <button id="btn_in">>>></button><br/><br/>
  <button id="btn_out"><<<</button>
</div>


<select multiple id="inactiveList" class="superSelect">
  <option value="x1" data-changed="no">Thingy 1</option>
  <option value="x2" data-changed="no">Thingy 2</option>
  <option value="x3" data-changed="no">Thingy 3</option>
  <option value="x4" data-changed="no">Thingy 4</option>
</select>

<br/>

<button id="btnSubmit">Submit</button>

Answer 1

1. 关于为什么不混合的一个很好的解释 data-属性和data()已经给出in this answer 。因此，更改所有内容以使用 .attr('data-changed')它会起作用的。

   它在没有排序功能的情况下工作的原因是因为当通过 empty() 从 DOM 中删除节点时，jQuery 内部存储的数据和 DOM 节点之间的关联显然会丢失。并通过 append() 重新添加.

2. 您不需要使用额外的类来可视化更改的选项。只需使用属性选择器 [data-changed="yes"]在你的 CSS 中。
3. 每个按钮单击事件的两个回调几乎相同，只是交换的列表 ID 不同。我重构了代码以使用一个函数并在列表之间动态切换。
4. 尽管这可能仅出现在您为此演示创建的代码中，而不出现在您的实际应用程序中:请避免使用 <和>字符(在按钮标签中)，而不将它们编码为 HTML 实体 </> 。尽管所有主要浏览器都应该很好地呈现按钮，但客户端的解析器可能会感到困惑并导致一些显示问题。

$('#btnSubmit').click(function(e) {
  e.preventDefault();

  var arr = new Array();

  // get options from active list
  var options = $('#activeList option');
  options.each(function(i, o) {
    if ($(o).data('changed') == "yes") {
      var skill = {
        id: $(o).val(),
        active: 0
      }
      arr.push(skill);
    }
  });


  // get options from inactive list
  var options = $('#inactiveList option');
  options.each(function(i, o) {
    if ($(o).data('changed') == "yes") {
      var skill = {
        id: $(o).val(),
        active: 1
      }
      arr.push(skill);
    }
  });

  console.log(arr);
});


$activeList = $('#activeList');
$inactiveList = $('#inactiveList');

function moveOptions() {
  var $otherList = this === $activeList ? $inactiveList : $activeList;
  var options = $('option:selected', this);

  options.each(function(i, o) {
    var c = $(o).data('changed');
    if (c == "yes") {
      $(o).attr('data-changed', 'no');
    } else {
      $(o).attr('data-changed', 'yes');
    }
  });

  $otherList.append(options);
  sortOptions($otherList);
}

$('#btn_in').click(moveOptions.bind($activeList));
$('#btn_out').click(moveOptions.bind($inactiveList));

function sortOptions(list) {
  var options = $('option', list);

  options.sort(function(a, b) {
    if (a.text > b.text) return 1;
    if (a.text < b.text) return -1;
    return 0;
  });

  list.empty().append(options);


}

.superSelect {
  min-height: 200px;
}

.buttons {
  display: inline-block
}

[data-changed="yes"] {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="activeList" class="superSelect">
  <option value="t1" data-changed="no">Option 1</option>
  <option value="t2" data-changed="no">Option 2</option>
  <option value="t3" data-changed="no">Option 3</option>
  <option value="t4" data-changed="no">Option 4</option>
</select>

<div class="buttons">
  <button id="btn_in">&gt;&gt;&gt;</button><br/><br/>
  <button id="btn_out">&lt;&lt;&lt;</button>
</div>


<select multiple id="inactiveList" class="superSelect">
  <option value="x1" data-changed="no">Thingy 1</option>
  <option value="x2" data-changed="no">Thingy 2</option>
  <option value="x3" data-changed="no">Thingy 3</option>
  <option value="x4" data-changed="no">Thingy 4</option>
</select>

<br/>

<button id="btnSubmit">Submit</button>