在点击功能上重新排序 bootstrap 列

Question

我想在点击时使用 bootstrap 和 jQuery 切换列顺序。

我已经为左键做了这个，但它不起作用：

$("#left").on("click",
    function() {
        $("#A").removeClass('order-1').addClass('order-2');
        $("#B").removeClass('order-2').addClass('order-1');
        console.log("1 done")
    }, 
    function() {
        $("#A").removeClass('order-2').addClass('order-1');
        $("#B").removeClass('order-1').addClass('order-2');
    }
);

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="arrow position-absolute top-50 start-0 translate-middle-y ps-2" id="left">left</div>
<div class="arrow position-absolute top-50 end-0 translate-middle-y pe-2" id="right">right</div>


        <div class="col-6 bg-success d-flex align-items-end order-1" id="A">one
        </div>
        <div class="col-6 bg-primary d-flex align-items-end order-2" id="B">two
        </div>

Answer 1

给你...

有一些问题。

您将此问题标记为 bootstrap-4，但在您的代码中使用了 bootstrap-5。
Bootstrap classes order-1 和 order-2 甚至没有工作，因为你需要用 col classes 包装 row class.
使用jQuerytoggleClass改变classes.

请参阅下面的代码段。

$(document).ready(function() {
  $(".col-6").click(function() {
    $("#A").toggleClass("order-1 order-2");
    $("#B").toggleClass("order-2 order-1");
  });
});

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="col-6 bg-success d-flex align-items-end order-1" id="A">one</div>
  <div class="col-6 bg-primary d-flex align-items-end order-2" id="B">two</div>
</div>

在点击功能上重新排序 bootstrap 列

Reorder bootstrap column on click function

html

arrays

jquery

bootstrap-5