两个引导图标类名可以工作在彼此旁边(类名优先级)?

Question

我有一个类名叫做(bi bi-clipboard)，我想当我点击它来改变类名(bi-clipboard-check)，所以问题是，它添加了类名旁边的其他类名像这样:

点击:前

<i class="bi bi-clipboard" onclick="changeIcon(this)"></i>

点击后:

<i class="bi bi-clipboard bi-clipboard-check" onclick="changeIcon(this)"></i>

方法:

function changeIcon(icon){
icon.classList.toggle("bi-clipboard-check");
}

我看到其他地方使用fontawesome，当你点击它，类切换toggle() javascript方法，它的工作，但我的不工作，因为两个类名彼此相邻。如有任何解决方案，我们将不胜感激。

Answer 1

如果你可以使用jQuery，你可以单独切换类-参见下面的jQuery演示

$(function() {
$(".bi").on('click', function() {
$(this).toggleClass("bi-clipboard-check");
$(this).toggleClass("bi-clipboard");
console.log($(this).prop('classList').value);
});
});

.bi {
height: 100px;
width: 100px;
display: inline-block;
background-color: green;
border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="bi bi-clipboard"></i>

或者，您可以单独切换这两个类。

查看下面的JS演示

function changeIcon(thisEl) {
thisEl.classList.toggle("bi-clipboard-check");
thisEl.classList.toggle("bi-clipboard");
console.log(thisEl.classList.value);
}

.bi {
height: 100px;
width: 100px;
display: inline-block;
background-color: green;
border: 1px solid red;
}

<i class="bi bi-clipboard" onclick="changeIcon(this)"></i>

Answer 2

如果你不想使用jQuery，

使用contains()方法

您可以检查classlist是否包含bi-clipboard并将其替换为bi-clipboard-check，反之亦然

function changeIcon(icon) {
if (icon.classList.contains("bi-clipboard")) {
icon.classList.replace("bi-clipboard", "bi-clipboard-check");
}
else if (icon.classList.contains("bi-clipboard-check")) {
icon.classList.replace("bi-clipboard-check", "bi-clipboard");
}
}

使用toggle()法

function changeIcon(icon) {
icon.classList.toggle("bi-clipboard-check");
icon.classList.toggle("bi-clipboard");
}