jQuery点击按钮添加class失效求助：#boxlink未添加link类

核心问题 #

你的代码里HTML元素的id定义错误：目标元素的id被写成了#boxlink，而jQuery选择器$("#boxlink")是在寻找id为boxlink的元素，两者不匹配，导致.link类无法被添加到正确的元素上。

修复方案 #

方案1：修正HTML的id属性（推荐） #

把HTML中<div id="#boxlink"改成<div id="boxlink"，让jQuery选择器能够正确匹配目标元素：

<!-- 修改前 -->
<div id="#boxlink" class="brandproject1 tablecell" style="width:150px">

<!-- 修改后 -->
<div id="boxlink" class="brandproject1 tablecell" style="width:150px">

方案2：修改jQuery选择器（仅当无法修改HTML时使用） #

如果不能修改HTML结构，需要在选择器中转义#符号（因为#在CSS选择器中是id的标识）：

// 修改前
$("#boxlink").addClass('link');

// 修改后
$("#\\#boxlink").addClass('link');

额外优化建议 #

为了避免样式优先级冲突，可以给.link类提升优先级，确保它能覆盖.brandproject1的默认样式：

.brandproject1.link {
  visibility: visible;
  opacity: 1;
}

修正后的完整代码示例 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row" style="height: 900px;">
      <div class="col">
         <div class="buttonsclass" style="height: 900px;margin: auto;">
            <div id="buttons" class="btn tablecell" style="width:90px">
                <h5><input type="button" id="button1" class="namebutton btn-danger" value="Brand"></input></h5>
                <h5><input type="button" id="button2" class="namebutton btn-danger" value="Servizi"> </input></h5>
                <h5><input type="button" id="button3" class="namebutton btn-danger" value="B2B"></input></h5>
            </div>
            <div id="boxlink" class="brandproject1 tablecell" style="width:150px">
              <div id="Brand" style="display:none">
                 <span><a href="#">1</a></span><br> 
                 <span><a href="#/">2</a></span>
              </div>
              <div id="Servizi" style="display:none">
                 <span><a href="#">2</a></span><br> 
                 <span><a href="#">2</a></span>
              </div>
              <div id="B2B" style="display:none">
                 <span><a href="#">3</a></span><br> 
                 <span><a href="#">3</a></span>
              </div>
            </div>
         </div>
      </div>
   </div>
</div>

JavaScript部分 #

$(document).ready(function(){
    $(".namebutton").click(function () {
    var div= $("#"+this.value);
          div.toggle("slow").siblings().hide("slow");
      $("#buttons").addClass('crossRotate');
      $("#boxlink").addClass('link');
    });
});

内容的提问来源于stack exchange，提问作者bastiag5