函数不工作，更改属性和添加/删除类jquery

Question

单击图标我通过添加和删除类来更改背景图像URL。我正在更改id，所以在第二次单击时，不同的id会添加并删除不同的类。

然而，这不起作用，有人可以告诉我为什么吗？

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

Answer 1

基本的代码在两个类之间切换，所以只需使用以下代码：

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

这应该创建你想要的相同。

<强>演示

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

我猜其他人也应该这样做。

更新演示

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