function not working, changing attribute and adding/removing classes jquery

Question

on click of an icon I am changing the background image url by adding and removing classes. i am changing the id so on the second click the different id adds and removes different classes.

however this is not working, can someone please tell me why??

$("#glass1").click(function() {
  $( "#glass1").addClass("wineGlassFull1");
  $( "#glass1").removeClass("wineGlass1");
  $("#glass1").attr("id", "glass1full");
});

$("#glass1full").click(function() {
  $( "#glass1").removeClass("wineGlassFull1");
  $( "#glass1").addClass("wineGlass1");
  $("#glass1full").attr("id", "glass1");
});

<div class="row animated subscribe1 fadeIn">
  <div class="col-md-8 col-sm-12 sub71">
     <br><br>
     <p class="titleDiv blood centered moon twenty22">
     Select&nbsp;Your&nbsp;Wine&nbsp;Preferences
     </p>
     <br><br><br>
     <div class="row marginBottom150">
        <div class="wineGlass1 col-md-3 col-sm-6" id="glass1">
           <p class="wineName">pale&nbsp;garnet</p>
        </div>
        <div class="wineGlass2 col-md-3 col-sm-6">
           <p class="wineName">medium&nbsp;red</p>
        </div>
        <div class="wineGlass3 col-md-3 col-sm-6">
         <p class="wineName">deep&nbsp;purple</p>
        </div>
     </div>
     <div class="row">
        <div class="wineGlass4 col-md-3 col-sm-6">
           <p class="wineName">pale&nbsp;platinum</p>
        </div>
        <div class="wineGlass5 col-md-3 col-sm-6">
           <p class="wineName">medium&nbsp;lemon</p>
        </div>
        <div class="wineGlass6 col-md-3 col-sm-6">
           <p class="wineName">deep&nbsp;gold</p>
        </div>
     </div>

Possible duplicate of [Direct vs. Delegated - jQuery .on()](https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) — Zenoo, Mar 08 '18 at 13:09
OP is changing the `id` of what's being targeted by his click handler. He just needs to delegate his event. — Zenoo, Mar 08 '18 at 13:11
When you assign the #glass1full click handler, no element with that ID exists, so that handler never gets attached to anything. — Daniel Beck, Mar 08 '18 at 13:11
@CarstenLøvboAndersen i have added the html.. do u need the style sheet? — beertwenty, Mar 08 '18 at 13:13

Carsten Løvbo Andersen · Answer 1 · 2018-03-08T13:18:36.130

Basic you code switch between 2 classes, so just use the follow code:

$("#glass1").click(function() {
  $("#glass1").toggleClass("wineGlassFull1 wineGlass1");
});

This should create the same as you want.

demo

$("#glass1").click(function() {
  $("#glass1").toggleClass("wineGlassFull1 wineGlass1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row animated subscribe1 fadeIn">
  <div class="col-md-8 col-sm-12 sub71">
    <br><br>
    <p class="titleDiv blood centered moon twenty22">
      Select&nbsp;Your&nbsp;Wine&nbsp;Preferences
    </p>
    <br><br><br>
    <div class="row marginBottom150">
      <div class="wineGlass1 col-md-3 col-sm-6" id="glass1">
        <p class="wineName">pale&nbsp;garnet</p>
      </div>
      <div class="wineGlass2 col-md-3 col-sm-6">
        <p class="wineName">medium&nbsp;red</p>
      </div>
      <div class="wineGlass3 col-md-3 col-sm-6">
        <p class="wineName">deep&nbsp;purple</p>
      </div>
    </div>
    <div class="row">
      <div class="wineGlass4 col-md-3 col-sm-6">
        <p class="wineName">pale&nbsp;platinum</p>
      </div>
      <div class="wineGlass5 col-md-3 col-sm-6">
        <p class="wineName">medium&nbsp;lemon</p>
      </div>
      <div class="wineGlass6 col-md-3 col-sm-6">
        <p class="wineName">deep&nbsp;gold</p>
      </div>
    </div>

I guess the same should happen for the rest of them.

updated demo

$("div[class^=wineGlass]").click(function() {
  $(this).toggleClass("wineGlassFull wineGlass");
});

.wineGlassFull {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row animated subscribe1 fadeIn">
  <div class="col-md-8 col-sm-12 sub71">
    <br><br>
    <p class="titleDiv blood centered moon twenty22">
      Select&nbsp;Your&nbsp;Wine&nbsp;Preferences
    </p>
    <br><br><br>
    <div class="row marginBottom150">
      <div class="wineGlass1 col-md-3 col-sm-6" id="glass1">
        <p class="wineName">pale&nbsp;garnet</p>
      </div>
      <div class="wineGlass2 col-md-3 col-sm-6">
        <p class="wineName">medium&nbsp;red</p>
      </div>
      <div class="wineGlass3 col-md-3 col-sm-6">
        <p class="wineName">deep&nbsp;purple</p>
      </div>
    </div>
    <div class="row">
      <div class="wineGlass4 col-md-3 col-sm-6">
        <p class="wineName">pale&nbsp;platinum</p>
      </div>
      <div class="wineGlass5 col-md-3 col-sm-6">
        <p class="wineName">medium&nbsp;lemon</p>
      </div>
      <div class="wineGlass6 col-md-3 col-sm-6">
        <p class="wineName">deep&nbsp;gold</p>
      </div>
    </div>

thanks for the help.. I completely forgot i could do that. So mcuh easier. take care. — beertwenty, Mar 08 '18 at 13:18
@beertwenty Happy to help, Take a look at the Updated Demo, It show how you can do it for multiple elements if you want — Carsten Løvbo Andersen, Mar 08 '18 at 13:19

function not working, changing attribute and adding/removing classes jquery

1 Answers1