jQuery addClass example

Change class name on click in jQuery

by artoo

HTML

<h1>Select Google Font</h1>


<label>Primary Font Family:</label>
<select id="primary_family" name="primary_family">
					<option value="000">-Primary Font Family-</option>
				</select>

<br />

<label>Variant:</label>
<select id="primary_variant" name="primary_variant">
					<option value="000">-Select Variant-</option>
				</select>

<br />



<p id="result">
  <p>

JavaScript

const url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyArlfEINQvJ2yt-_6GCZ8pvE-auFSk1WJc'


$.getJSON(url, function(data) {
  $.each(data.items, function(index, value) {
    var primary_family_id;
    var primary_variant_id;
    var primary_family_name;
    var primary_value1;


    $("#primary_family").append('<option rel="' + index + '" value="' + value.family + '">' + value.family + '</option>');

    $("#primary_family").change(function() {
      primary_family_name = $(this).find('option:selected').attr('value');
      $("#primary_variant").find("option:gt(0)").remove();
      $("#primary_variant").find("option:first").text("Loading...");

      primary_family_id = $(this).find('option:selected').attr('rel');
      console.log("Font Family INDEX : " + primary_family_id);

      $.each(data.items[primary_family_id].variants, function(index1, value1) {
        $("#primary_variant").find("option:first").text("-Select Variant-");
        $("#primary_variant").append('<option rel="' + index1 + '" value="' + value1 + '">' + value1 + '</option>');

        $("#primary_variant").change(function() {
          primary_family_name = primary_family_name.replace(" ", "+");
          $("#result").text("https://fonts.googleapis.com/css?family=" + primary_family_name + ':' + $(this).find('option:selected').attr('value'));
        });
      });
    });
  });
});