用数据目标更改 class

Question

I have tried this:

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

Unfortunately, it doesn't work to change the classes by clicking a button. Is it just a little mistake or does this logic not work at all?

Answer 1

Three problems:

1. Wrapping $(this).data("target") ,
2. Including class selector . in target dataset: data-target=".pap" ,
3. Adding class rather than replacing class:

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