Изменить имя класса текущей ссылки на привязку в JavaScript - PullRequest
0 голосов
/ 20 апреля 2020

Я реализовал функцию разбиения на страницы, используя bootstrap карты.

Мои нумерованные страницы имеют следующие значения:

@for (int i = 1; i <= Model.PageCount(); i++) {
  <a href="#" class="page-link-item btn btn-dark" data-page="@i">@i</a>
}

Сначала каждая ссылка имеет класс btn btn-dark. Но я хочу, чтобы на первой странице был класс btn btn-success active. Я пробовал следующее, но каждый раз, когда я нажимаю на последующие страницы, предыдущие остаются зелеными, то есть btn btn-sucess active. Пожалуйста, помогите мне исправить это.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.0/mustache.min.js"></script>

<script>
  var pagination = {
    employees: [],
    init: function (employees) {
      this.employees = employees;
      this.cacheDom();
      this.bindEvents();
      this.render();
    },
    cacheDom: function () {
      this.$pageLinks = $(".page-link-item");
      this.$gridContainter = $("#grid-container");
      this.template = $("#employee-template").html();
    },
    bindEvents: function () {
      this.$pageLinks.on('click', this.handlePageLinkClick.bind(this))
    },
    render: function () {
      var data = {
        employees: this.employees
      };

      console.log(data);
      console.log(this.$gridContainter);

      this.$gridContainter.html(Mustache.render(this.template, data));
    },
    handlePageLinkClick: function (evt) {
      var page = $(evt.target).data("page"); //btn btn-dark

      if (page == page) {
        $(evt.currentTarget).removeClass('btn btn-dark')

        evt.currentTarget.className += " btn btn-success active";
      } else {
        $(evt.currentTarget).removeClass('btn btn-success active')
        evt.currentTarget.className += " btn btn-dark";
      }

      console.log(page);

      $.get('/employee/GetEmployees', { page: page }, function (data) {
        this.employees = data;
        this.render();
      }.bind(this));
    }
  }

  var employees = JSON.parse('@Html.Raw(Json.Serialize(Model.Employees))');
  pagination.init(employees);
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...