在javascript中处理多个分区

handling more than one divisions in javascript

本文关键字：分区 处理 javascript      更新时间：2023-09-26

在我的程序中，我有三个分区，分别是"信息"、"兴趣"answers"墙"。我希望这个分区在用户点击它时改变它们的颜色。最初，所有3个划分类都具有相同的颜色#dcdcdc。当用户单击其中一个时，我想将其颜色更改为#999，但其他分区的颜色必须保持为#dcdcdc。

这大部分工作正常，但当我点击第二部分时，前一部分的颜色并没有变回#dcdcdc。

JavaScript部分。

$(document).ready(function(){
 $('#pro_head > div').click
 (
  function() 
  {
   $(this).css("background-color", "#999");
   $(this).css("font-weight", "bold");
  },
 );
});

HTML部分：

<div pro_head>
  <div class="information"></div>
  <div class="interest"></div>
  <div class="wall"></div>
</div>

CSS

.selected {
   background-color: #999;
   font-weight : bold;
}

JS-

$(document).ready(function(){ 
  var divs1 = $('#pro_head1 > div'), /* I'm guessing selectors */
      divs2 = $('#pro_head2 > div'), 
      addHandler = function(divs) {
         divs.on('click', function() { 
            divs.removeClass('selected');
            $(this).addClass('selected');
         }); 
      };
 addHandler(divs1);
 addHandler(divs2);
})

其想法是创建一个特殊的类，该类必须应用于选定的除法（并在其他地方删除）。通过这种方式，您可以管理复杂的样式，而无需在JS中指定所有css规则，并且可以更好地从功能层中识别表示层

编辑：在用户请求评论后更新。

您可以进行

$(document).ready(function(){
 $('#pro_head > div').click
 (
  function() 
  {
  var divs = $('#pro_head > div');
   divs.css("background-color", "#dcdcdc");
   divs.css("font-weight", "normal");
   $(this).css("background-color", "#999");
   $(this).css("font-weight", "bold");
  },
 );
});
相关文章：