javascript - 使用选择框在 div 之间交换类

Question

我有 5 个 div，每个 div 都包含一个列出所有 div 的选择框。 我试图做到这一点，以便当您使用选择框时，它将您正在使用的 div 的类交换为您选择的 div。

我已经设置类来使用 css flex 更改列位置。

到目前为止，它在第一次更改时可以正常工作，但在之后的任何更改中都无法正常工作。 我在这里做错了什么？

fiddle :https://jsfiddle.net/wd9vrfmn/

JQ:

  var col = ['col1', 'col2', 'col3', 'col4', 'col5'] //List of classes

  $("select").change(function(){
    var prevClass = $(this).parent().attr('class');
    var nextClass = col[$(this).val() - 1];
    $(this).val($(this).find('option[selected]').val());
    $('div.' + prevClass).removeClass(prevClass).addClass("col0");
    $('div.' + nextClass).removeClass(nextClass).addClass(prevClass);
    $('div.col0').removeClass("col0").addClass(nextClass);
  });

Answer 1

选项的值未更新。我添加了以下代码:

var prevId = $(this).parent().attr('class').replace("col","");
var nextId = $(this).val();
var prevElem = $("option[value="+prevId+"]");
var nextElem = $("option[value="+nextId+"]");
$(prevElem).val(nextId);
$(nextElem).val(prevId);

请引用此fiddle .