Question

我有一个如下所示的表格

应该发生的事情是，当单击“所有天数”按钮时，显然所有天数都设置为活动状态，只有工作日为周一至周五等。

我有以下JQuery正在切换类

    $(document).ready(function () {
        $("#allDays").on('click', function (event) {
            console.log("1");
            $("button[name = 'weekdaysbutton']").addClass('btn-primary');
            $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
        });
        $("#allWkDays").on('click', function (event) {
            console.log("2");
            $("button[name = 'weekdaysbutton']").addClass('btn-primary');
            $("button[name = 'weekenddaysbutton']").removeClass('btn-default');
        });
        $("#allWkEnds").on('click', function (event) {
            console.log("3");
            $("button[name = 'weekdaysbutton']").removeClass('btn-default');
            $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
        });
    });

但是我有一个问题，如果我单击“工作日”仅会突出显示周一至周五，但是如果我单击“所有周末”，我的周一至周五仍会突出显示，并且这会发生在我单击的其他任何按钮上似乎不能正确添加我的课程。

HTML

<div class="form-horizontal">
<div class="form-group">
    <label class="col-lg-2 control-label" for="allDays">
        Days of the week
    </label>
    <div class="col-lg-4">
        <button id="allDays" name="allDays" class="btn btn-green"
            type="button">
            All Days
        </button>
        <button id="allWkDays" name="allWkDays" class="btn btn-green"
            type="button">
            Weekdays Only
        </button>
        <button id="allWkEnds" name="allWkEnds" class="btn btn-green"
            type="button">
            Weekends Only
        </button>
    </div>
</div>
</div>
<div class="form-horizontal">
    <div class="form-group">
        <div class="col-lg-2"></div>
        <div class="col-lg-4">
            <button id="mon" name="weekdaysbutton" class="btn btn-default"
                type="button">Mon</button>
            <button id="tue" name="weekdaysbutton" class="btn btn-default"
                type="button">Tue</button>
            <button id="wed" name="weekdaysbutton" class="btn btn-default"
                type="button">Wed</button>
            <button id="thur" name="weekdaysbutton" class="btn btn-default"
                type="button">Thur</button>
            <button id="fri" name="weekdaysbutton" class="btn btn-default"
                type="button">Fri</button>
            <button id="sat" name="weekenddaysbutton" class="btn btn-default"
                type="button">Sat</button>
            <button id="sun" name="weekenddaysbutton" class="btn btn-default"
                type="button">Sun</button>
        </div>
    </div>
</div>

每次单击按钮都击中正确的consolelog时，我看不到哪里出了错。

当我检查开发工具时，尽管它显示如下图所示，很奇怪

初始页面加载 点击“所有工作日”按钮

或者有没有更好的方法可以完全做到这一点。

我在提琴上有一个工作副本，但是在我的代码中不起作用 http://jsfiddle.net/2pcgnz0w/1/

Answer 1

您的问题是您没有删除正确的类。

您的<ng-org-chart (myCustomClickEvent)="eventUser()" [topEmployee]="topEmployee"></ng-org-chart>应该是removeClass('btn-default')

removeClass('btn-primary')

$(document).ready(function() {
  $("#allDays").on('click', function(event) {
    $("button[name = 'weekdaysbutton']").addClass('btn-primary');
    $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
  });
  $("#allWkDays").on('click', function(event) {
    $("button[name = 'weekdaysbutton']").addClass('btn-primary');
    $("button[name = 'weekenddaysbutton']").removeClass('btn-primary');
  });
  $("#allWkEnds").on('click', function(event) {
    $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
    $("button[name = 'weekdaysbutton']").removeClass('btn-primary');
  });
});

要更进一步，允许双击删除这些类，可以执行以下操作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" />
<div class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-2 control-label" for="allDays">
        Days of the week
    </label>
    <div class="col-lg-4">
      <button id="allDays" name="allDays" class="btn btn-green" type="button">
            All Days
        </button>
      <button id="allWkDays" name="allWkDays" class="btn btn-green" type="button">
            Weekdays Only
        </button>
      <button id="allWkEnds" name="allWkEnds" class="btn btn-green" type="button">
            Weekends Only
        </button>
    </div>
  </div>
</div>
<div class="form-horizontal">
  <div class="form-group">
    <div class="col-lg-2"></div>
    <div class="col-lg-4">
      <button id="mon" name="weekdaysbutton" class="btn btn-default" type="button">Mon</button>
      <button id="tue" name="weekdaysbutton" class="btn btn-default" type="button">Tue</button>
      <button id="wed" name="weekdaysbutton" class="btn btn-default" type="button">Wed</button>
      <button id="thur" name="weekdaysbutton" class="btn btn-default" type="button">Thur</button>
      <button id="fri" name="weekdaysbutton" class="btn btn-default" type="button">Fri</button>
      <button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button">Sat</button>
      <button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button">Sun</button>
    </div>
  </div>
</div>

$(document).ready(function() {
  var all = false
  $("#allDays").on('click', function(event) {
    if ($("button[name = 'weekdaysbutton']").hasClass('btn-primary') && $("button[name = 'weekenddaysbutton']").hasClass('btn-primary')) {
      $("button[name = 'weekdaysbutton']").removeClass('btn-primary');
      $("button[name = 'weekenddaysbutton']").removeClass('btn-primary');
    } else {
      all = true
      $("button[name = 'weekdaysbutton']").addClass('btn-primary');
      $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
    }
  });
  $("#allWkDays").on('click', function(event) {
    if ($("button[name = 'weekdaysbutton']").hasClass('btn-primary') && !all) {
      $("button[name = 'weekdaysbutton']").removeClass('btn-primary');
    } else {
      all = false
      $("button[name = 'weekdaysbutton']").addClass('btn-primary');
      $("button[name = 'weekenddaysbutton']").removeClass('btn-primary');
    }
  });
  $("#allWkEnds").on('click', function(event) {
    if ($("button[name = 'weekenddaysbutton']").hasClass('btn-primary') && !all) {
      $("button[name = 'weekenddaysbutton']").removeClass('btn-primary');
    } else {
      all = false
      $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
      $("button[name = 'weekdaysbutton']").removeClass('btn-primary');
    }
  });
});

jQuery添加/删除类无法正常工作

1 个答案: