我試過這個：
$(".font").click(function() {
var target = $($(this).data("target"));
$("#text").addClass(target);
}).pap {
font-family: Papyrus;
}
.ar {
font-family: Arial;
}
.hel {
font-family: Helvetica,
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="font" data-target=".pap">Papyrus</button>
<button class="font" data-target=".ar">Arial</button>
<button class="font" data-target=".hel">Helvetica</button>
<div id="text" class="ar">Text</div>不幸的是，通過單擊按鈕來更改類不起作用。這只是一個小錯誤還是這個邏輯根本不起作用？
uj5u.com熱心網友回復：
三個問題：
- 包裝
$(this).data("target")， .在資料集中包括類選擇器target：data-target=".pap"，- 添加類而不是替換類：
$(".font").click(function() {
var target = $(this).data("target"); // no double $ wrap
// replace class because the first class listed takes precedence
$("#text").attr('class', target);
}).pap {
font-family: Papyrus;
}
.ar {
font-family: Arial;
}
.hel {
font-family: Helvetica,
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- notice no "dot" classname -->
<button class="font" data-target="pap">Papyrus</button>
<button class="font" data-target="ar">Arial</button>
<button class="font" data-target="hel">Helvetica</button>
<div id="text" class="ar">Text</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/505177.html
標籤：javascript jQuery