2

Есть два меню в разных блоках на странице. В меню 2 кнопки.

Можно ли чтобы при клике на кнопки в первом меню все синхронно переключалось и во втором меню с активного на неактивный класс (и наоборот).

Пытаюсь мудрить (но безрезультатно):

$('.a-1').on('click', function(e){
  e.preventDefault();

  var $this = $(this),
      b2 = $('.a-2');

  if(!$this.hasClass('active')){
    $this.addClass('active')
      .siblings().removeClass('active');
    b2.removeClass('active');
  }else {
    $this.removeClass('active');
  }

});

$('.a-2').on('click', function(e){
  e.preventDefault();

  var $this = $(this),
      b1 = $('.a-1');

  if(!$this.hasClass('active')){
    $this.addClass('active')
      .siblings().removeClass('active');
    b1.removeClass('active');
  }else {
    $this.removeClass('active');
  }

});
.active {
  color: red;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
<menu>
  <a href="#" class="a a-1 active">1</a>
  <a href="#" class="a a-2">2</a>
</menu>
  
<menu>
  <a href="#" class="a a-1 active">1</a>
  <a href="#" class="a a-2">2</a>
</menu>

3 ответа 3

2

$('.a').on('click', function(e) {
  $(".a").removeClass("active");
  var data = $(this).attr("data-id");
  $("[data-id='" + data + "']").addClass("active");
});
.active {
  color: red;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<menu>
  <button data-id="a-1" class="a  active">1</button>
  <button data-id="a-2" class="a">2</button>
  <button data-id="a-3" class="a">3</button>
</menu>

<menu>
  <button data-id="a-1" class="a active">1</button>
  <button data-id="a-2" class="a">2</button>
  <button data-id="a-3" class="a">3</button>
</menu>

1
  • огромное спасибо !!!!
    – SVE
    30 ноя 2016 в 15:07
0

Если меню у вас с одинаковым содержимым, то делаем следующее:

  • инициализируем ссылки в меню -> получаем массив ссылок
  • по событию мы получаем event из которого можно с помощью event.target определить какой сейчас нажат элемент
  • определяем позицию элемента в массиве ссылок одного меню
  • ну и выполняем необходимые действия внутри второго меню (например, добавляем/снимаем класс активной ссылки и прочее)

В коде сейчас к сожалению нет возможности написать

0

Такая задача может возникнуть когда требуется независимое связывание данных для элементов на странице. Данный пример демонстрирует как это можно реализовать с помощью mvc:

class MenuModel {

    constructor() {
        this._obs = [];
        this._selected = -1;
        this.selected = 0;
    }
    select(num) {
        this.selected = num;
    }

    set selected(value) {
        if(value != this._selected) {
            this._selected = value;
            this.dispatchEvent(new Event("selectChange"));
        }
    }

    get selected() {
        return this._selected;
    }

    addEventListener(type, node) {
        this._obs.push({type, node});
    }

    removeEventListener(type, node) {
        this._obs = this._obs.filter(obs=>obs.type == type && obs.node == node);
    }

    dispatchEvent(event) {
        let obs = this._obs.filter(obs => obs.type == event.type);
        obs.forEach(obs=>{
            let node = obs.node;
            if(typeof node == "function") {
                node.call(this, event);
            }
            else if(node.handleEvent) {
                node.handleEvent(event);
            }
        });
    }

}

class ButtonView {

    constructor(target, index) {
        this.target = target;
        target.addEventListener("click", this);
        this.index = index;
    }

    bind(model) {
        if(this.model != model) {
            if(this.model) this.model.removeEventListener("selectChange", this);
            this.model = model;
            if(model) {
                model.addEventListener("selectChange", this);
                this.refresh();
            }
        }
    }

    refresh() {
        this.target.classList.toggle("active", this.model.selected == this.index);
    }

    handleEvent(event) {
        if(event.type == "selectChange") this.refresh();
        else if(event.type == "click") {
            if(this.model) this.model.select(this.index);
        }
    }

}

ButtonView.create = (target, index) => new ButtonView(target, index);


window.addEventListener("load", ()=>{

    let menu1 = document.body.querySelectorAll("menu")[0];
    let menu2 = document.body.querySelectorAll("menu")[1];

    let list1view = [].slice.call(menu1.querySelectorAll("button")).map(ButtonView.create);
    let list2view = [].slice.call(menu2.querySelectorAll("button")).map(ButtonView.create);

    var menu = new MenuModel();

    list1view.forEach(elm=>elm.bind(menu));
    list2view.forEach(elm=>elm.bind(menu));

});

Изначально получается довольно громоздкий велосипед, но если программировать в таком же стиле, то избыточности в коде станет меньше за счет обобщения. Одно из преимуществ данного подхода заключается в том, что теперь можно оказывать влияние на элементы списка не обращаясь к dom element напрямую, а просто изменяя model, например, если теперь сделать вот так:

menu.select(2);

то изменения будут автоматически применены к представлению.

Понимание принципа работы данного кода помогает в последствии с легкостью перейти на любой современный mvc фреймворк.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.