Question

我有5个div，每个div包含一个列出所有div的选择框。我试图让它成为当你使用选择框时它将你正在使用的div的类交换到你选择的div。

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

到目前为止，它将在第一次更改时正常工作，但在此之后不会。我在这里做错了什么？

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

value选项未获得更新。我添加了以下代码：

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。

Answer 2

首先添加类然后从div中删除class请检查。

  var col = ['col1', 'col2', 'col3', 'col4', 'col5']

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

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

2 个答案: