Question

在此我想减少我的JS文件中的代码行数。我正在使用物化引导程序，这是我的代码：

＆＃13;

$(document).ready(function() {
  //$('select').material_select();
  $('.buttonEnable').addClass('enableButtonColor');
});

$('.buttonMonitor').click(function() {
  $(this).addClass('enableButtonColor');
  $('.buttonLaunch').removeClass('enableButtonColor');
  $('.buttonEnable').removeClass('enableButtonColor');
});

$('.buttonLaunch').click(function() {
  $(this).addClass('enableButtonColor');
  $('.buttonMonitor').removeClass('enableButtonColor');
  $('.buttonEnable').removeClass('enableButtonColor');
});

$('.buttonEnable').click(function() {
  $(this).addClass('enableButtonColor');
  $('.buttonMonitor').removeClass('enableButtonColor');
  $('.buttonLaunch').removeClass('enableButtonColor');
});

＆＃13;

.enableButtonColor {
  background-color: #8dc63f !important;
  color: white !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col s4 enableButton"> <a class="waves-effect waves-light btn extraPadding buttonEnable">Enable</a> </div>
  <div class="col s4 launchButton"><a class="waves-effect waves-light btn extraPadding buttonLaunch">Launch</a> </div>
  <div class="col s4 monitorButton"> <a class="waves-effect waves-light btn extraPadding buttonMonitor">Monitor</a> </div>
</div>

＆＃13;

Answer 1

只需将整行包装到具有任何类名的div中，然后使用此类切换按钮上的活动类click

Stack Snippet

$(document).ready(function() {
  $('.buttonEnable').addClass('enableButtonColor');
  $(document).on('click', '.button-row a', function() {
    $('.button-row a').removeClass('enableButtonColor');
    $(this).addClass('enableButtonColor');
  });
});

.enableButtonColor {
  background-color: #8dc63f !important;
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-row">
  <div class="row">
    <div class="col s4 enableButton"> <a class="waves-effect waves-light btn extraPadding buttonEnable">Enable</a> </div>
    <div class="col s4 launchButton"><a class="waves-effect waves-light btn extraPadding buttonLaunch">Launch</a> </div>
    <div class="col s4 monitorButton"> <a class="waves-effect waves-light btn extraPadding buttonMonitor">Monitor</a> </div>
  </div>
</div>

Answer 2

只需在你的所有div中添加一些常用类（比如我使用了buttonClass）。然后将你的jquery应用到那个。

jquery的： -

＆＃13;

$(document).ready(function() {
  //$('select').material_select();
  $('.buttonEnable').addClass('enableButtonColor');
});

$('.buttonClass').on('click','a',function() {
 
  $(this).closest('.buttonClass').siblings().find('a').removeClass('enableButtonColor');
  $(this).siblings().removeClass('enableButtonColor');
   $(this).addClass('enableButtonColor');
});

＆＃13;

.enableButtonColor {
  background-color: #8dc63f !important;
  color: white !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col s4 enableButton buttonClass"> <a class="waves-effect waves-light btn extraPadding buttonEnable ">Enable</a> </div>
  <div class="col s4 launchButton buttonClass"><a class="waves-effect waves-light btn extraPadding buttonLaunch">Launch</a> </div>
  <div class="col s4 monitorButton buttonClass"> <a class="waves-effect waves-light btn extraPadding buttonMonitor">Monitor</a> </div>
</div>

＆＃13;

Answer 3

试试这个

var $btn = $(".s4 a");
    $btn.click(function() {
       $btn.removeClass("enableButtonColor");
       $(this).addClass("enableButtonColor");
    });

<强>段

＆＃13;

var $btn = $(".s4 a");
$btn.click(function() {
  $btn.removeClass("enableButtonColor");
  $(this).addClass("enableButtonColor");
});

＆＃13;

.enableButtonColor {
  background-color: #8dc63f !important;
  color: white !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col s4 enableButton"> <a class="waves-effect waves-light btn extraPadding buttonEnable">Enable</a> </div>
  <div class="col s4 launchButton"><a class="waves-effect waves-light btn extraPadding buttonLaunch">Launch</a> </div>
  <div class="col s4 monitorButton"> <a class="waves-effect waves-light btn extraPadding buttonMonitor">Monitor</a> </div>
</div>

＆＃13;

Answer 4

我认为这是一种很好的方法。尽管它有更高的时间复杂度，但对于少于几千的项目来说这不应该是问题。

$(".click-me").click(function(){
  $('.click-me').each(function() {
    $(this).removeClass('active');
  });
  $(this).addClass('active');
})

.active {
   background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="active click-me">Aasdf</a>
<a class="click-me">Basdf</a>
<a class="click-me">Casdf</a>

如何减少更改按钮颜色的代码行数？

4 个答案: