Change class with data-target

Anna_B 0
Viewed 26

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?

jquery javascript
1 Answers

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>

bloodyKnuckles0
Related