javascript - 编写此 JQuery 代码的更好方法

Question

当页面加载/重新加载时，我想保留第一个按钮的背景颜色，并且当单击另一个按钮时，第一个按钮颜色消失。

我已经为它编写了这段代码:

$(document).ready(function(){
  $(".target1").css("background-color", "red");
  $(".target1").css("color", "white");
  $(".target2").click(function(){
    $(".target1").css("background-color", "transparent");
    $(".target1").css("color", "black");
    $(".target2").css("background-color","red");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collapse3">
<ol>
<button class="target1" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br>
                        
<button class="target2" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br>
                        
<button class="target3" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br>
                        
<a class="target4" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
                        
<button class="target5" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
 </ol>
</div>

我有很多其他按钮，因此在 Jquery 中执行此类代码我认为这不是最佳实践...我需要帮助向我解释更好的方法来执行此操作？我会感激您的教诲!

谢谢

Answer 1

您需要 this 函数:

$(document).ready(function() {
  $(".target").css("color", "black").css("background-color", "white");
  $(".target1").css("background-color", "red");
  $(".target1").css("color", "white");
  $(".target").click(function() {
    $(".target1").css("background-color", "none");
    $(".target").css("color", "black").css("background-color", "white");
    $(this).css("background-color", "red");
  });
});

<button class="target target1" type="button">
  Button 1
</button>
<button class="target target2" type="button">
  Button 2
</button>
<button class="target target3" type="button">
  Button 3
</button>
<button class="target target4" type="button">
  Button 4
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JSFiddle Example

希望这有帮助!

编辑:移至代码片段