单击时更改 div 类的名称答案

【问题标题】：Change the name of class of div on click单击时更改 div 类的名称
【发布时间】：2018-05-15 08:17:02
【问题描述】：

我在下面写了几行代码

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

我想更改所选或单击的 div 的类名称，并且 div 的其余部分应包含原始类“btn-custom-primary”。上面的代码不起作用...请帮助！！！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这是你想要的吗？

$(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');
  });
});

演示

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

.btn-custom-selected {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

我用了你的代码，代码不起作用。我认为点击没有被触发。我还需要 div 的 id 以供进一步使用
我已经读取了ID，我无法告诉你为什么点击不起作用，请尝试检查控制台是否有错误
我已经在控制台上调试过了，实际原因是按钮没有被触发。 4
我的点击功能和你的点击功能没有什么不同。尝试在您的点击事件中添加console.log("test")，看看它是否显示在控制台中。
不，它不会在控制台中显示测试。我可以告诉你一件事，“房间信息” div 中的所有按钮（div）都是在选择标签的更改事件上以编程方式创建的。

【解决方案2】：

您所做的远远超出了要求。单击某个元素时，您将在 jQuery 的处理函数中使用 $(this) 引用它。在那里你可以为特定的点击元素添加你想要的任何类。

所有其他 div 已经有类 btn-custom-primary。所以你不需要第二次添加它

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

【讨论】：