我想在點擊時使用 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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>uj5u.com熱心網友回復：
干得好...
有幾個問題。
- 您將此問題標記為
bootstrap-4，但bootstrap-5在您的代碼中使用。 - 引導類
order-1，order-2甚至沒有作業，因為你需要col用一個類來包裝row類。 - 使用 jQuery
toggleClass更改類。
請參閱下面的片段。
$(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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/444064.html