Javascript 单击更改div类的名称

我已经写了以下几行代码

        $(document).ready(function()
        {

           $('.btn-custom').click(function() { 
              var id = $(this).attr('id');
              $('.btn-custom').addClass('.btn-custom-primary');
              $("#"+id).addClass('btn-custom-selected');
           });
           ...
         });

这些自定义按钮的html在浏览器中呈现为

      <div id="rooms-information" class="form-group">
      <div id="3ccd3803-a8ba-0328-cf9d-28bb72abbcae" class="btn-custom btn-custom-primary col-md-4 room-no-6"><div class="room-info-section"><span>Room No.: 6</span><br><span id="room0">Deluxe</span></div><div class="capacity-info"><span>Total Capacity: 8</span><br><span>Available: 8</span></div></div>
      <div id="4908ec27-b2ca-7bf7-de3d-83181d5c41a6" class="btn-custom btn-custom-primary col-md-4 room-no-1"><div class="room-info-section"><span>Room No.: 1</span><br><span id="room1">Deluxe</span></div><div class="capacity-info"><span>Total Capacity: 4</span><br><span>Available: 4</span></div></div>
      <div id="531709a7-6bc2-ddbe-3f3d-1642b7d70929" class="btn-custom btn-custom-primary col-md-4 room-no-3"><div class="room-info-section"><span>Room No.: 3</span><br><span id="room2">Simple</span></div><div class="capacity-info"><span>Total Capacity: 4</span><br><span>Available: 4</span></div></div>
      <div id="cac24d40-0e85-6707-9797-5f9f3449ecf8" class="btn-custom btn-custom-primary col-md-4 room-no-4"><div class="room-info-section"><span>Room No.: 4</span><br><span id="room3">Deluxe</span></div><div class="capacity-info"><span>Total Capacity: 6</span><br><span>Available: 6</span></div></div>
      </div>

房间号：6个总容量：8个可用容量：8个
房间号：1个总容量：4个可用容量：4个
房间号：3
单体总容量：4
可用数量：4
房间号：4个总容量：6个可用容量：6个

我想更改所选或单击的div的类的名称，div的其余部分应该包含原始类“btn custom primary”。

---

上面的代码不起作用。。。请帮忙

您所做的远远超出了要求。当单击某个元素时，您将在jQuery的处理函数中使用

$（this）

引用它。在那里，您可以为特定的单击元素添加任何您想要的类

所有其他div都已具有class

btn自定义主类

。所以你不需要第二次添加它

$('.btn-custom').click(function() {
     $(this).removeClass('btn-custom-primary').addClass('btn-custom-selected');
});

---

你所做的远远超出了要求。当单击某个元素时，您将在jQuery的处理函数中使用

$（this）

引用它。在那里，您可以为特定的单击元素添加任何您想要的类

所有其他div都已具有class

btn自定义主类

。所以你不需要第二次添加它

$('.btn-custom').click(function() {
     $(this).removeClass('btn-custom-primary').addClass('btn-custom-selected');
});

这是你想要的吗

$(document).ready(function() {
  $('.btn-custom').click(function() { 
    console.log("test");
    var id = $(this).attr('id');
    $('.btn-custom').removeClass('btn-custom-selected').addClass("btn-custom-primary");
    $(this).removeClass("btn-custom-primary").addClass('btn-custom-selected');
  });
});

演示

$（文档）.ready（函数（）{
$（'.btn custom'）。单击（函数（）{
var id=$（this.attr（'id'）；
$（'.btn custom'）.removeClass（'btn-custom-selected'）.addClass（“btn custom primary”）；
$（this）.removeClass（“btn自定义主”）.addClass（“btn-custom-selected”）；
});
});
.btn已选择自定义{
颜色：蓝色
}

房间号：6号豪华房
总容量：8
可用容量：8
房间号：1号豪华房
总容量：4
可用容量：4
房间号：3
简单
总容量：4
可用容量：4
房间号：4号豪华房
总容量：6可用容量：6
这就是你想要的吗

$(document).ready(function() {
  $('.btn-custom').click(function() { 
    console.log("test");
    var id = $(this).attr('id');
    $('.btn-custom').removeClass('btn-custom-selected').addClass("btn-custom-primary");
    $(this).removeClass("btn-custom-primary").addClass('btn-custom-selected');
  });
});

演示


$（文档）.ready（函数（）{
$（'.btn custom'）。单击（函数（）{
var id=$（this.attr（'id'）；
$（'.btn custom'）.removeClass（'btn-custom-selected'）.addClass（“btn custom primary”）；
$（this）.removeClass（“btn自定义主”）.addClass（“btn-custom-selected”）；
});
});
.btn已选择自定义{
颜色：蓝色
}

房间号：6号豪华房
总容量：8
可用容量：8
房间号：1号豪华房
总容量：4
可用容量：4
房间号：3
简单
总容量：4
可用容量：4
房间号：4号豪华房
总容量：6可用容量：6
我使用了你的代码，代码不起作用。我认为点击没有被触发。此外，我还需要div的id以供进一步使用我已经读取了id，我无法告诉您为什么单击不起作用，请尝试检查控制台是否存在错误我已在控制台上对此进行了调试，实际原因是按钮未触发。4我的点击功能和你的点击功能没有什么不同。尝试在单击事件中添加
console.log（“test”）
，查看它是否显示在控制台中。不，它不会在控制台中显示test。我可以告诉你一件事，“房间信息”div中的所有按钮（div）都是在select标记的更改事件中以编程方式创建的。我使用了您的代码，该代码不起作用。我认为点击没有被触发。此外，我还需要div的id以供进一步使用我已经读取了id，我无法告诉您为什么单击不起作用，请尝试检查控制台是否存在错误我已在控制台上对此进行了调试，实际原因是按钮未触发。4我的点击功能和你的点击功能没有什么不同。尝试在单击事件中添加
console.log（“test”）
，查看它是否显示在控制台中。不，它不会在控制台中显示test。我可以告诉你一件事，“房间信息”div中的所有按钮（div）都是在select标记的更改事件中以编程方式创建的。