在单击函数上重新排序引导列

Question

我想切换列顺序使用引导和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

给你..。

有几个问题。

code.

• Bootstrap类中使用bootstrap-5甚至不能工作，因为需要用row类包装col类。

H 111使用jQuery toggleClass来更改类。H 213/code>G 214

看下面的片段。

​

$(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>

​