Как передать в bind() корректный контекст?

Question

[wagwandude]

Добрый вечер.

Уже второй час сижу, мучаюсь с контекстом, как его передать?
Конкретно в моем случае необходимо передать значение this для работы переключений в данном фрагменте:

var handler = function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content, .tab_test").hide();

    var activeTab = $(this).find("a").attr("class");
    $('.' + activeTab).show();
  }

  $("ul.tabs li").interval = setInterval(handler.bind(this), 1000);

Исходный код:

<ul class="tabs">
  <li><a href="javascript://" class="tab1">Tab 1</a></li>
  <li><a href="javascript://" class="tab2">Tab 2</a></li>
  <li><a href="javascript://" class="tab3">Tab 3</a></li>
</ul>

<div class="tab1 tab_content">1</div>
<div class="tab2 tab_content">2</div>
<div class="tab3 tab_content">3</div>

<div class="tab1 tab_test">ссылка 1</div>
<div class="tab2 tab_test">ссылка 2</div>
<div class="tab3 tab_test">ссылка 3</div>

$(document).ready(function() {

  $(".tab_content, .tab_test").hide();
  $("ul.tabs li:first").addClass("active").show();
  $(".tab_content:first, .tab_test:first").show();

  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content, .tab_test").hide();

    var activeTab = $(this).find("a").attr("class");
    $('.' + activeTab).show();
    return false;
  });

  var handler = function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content, .tab_test").hide();

    var activeTab = $(this).find("a").attr("class");
    $('.' + activeTab).show();
  }

  $("ul.tabs li").interval = setInterval(handler.bind(this), 1000);

});

ul {
  height: 25px;
}

ul li {
  float: left;
  height: 25px;
  background-color: #333;
  margin: 0 5px 0 0;
}

ul li.active {
  background: red;
}

ul li a {
  text-decoration: none;
  color: #fff;
  margin: 2px 0 0 0;
  padding: 3px 10px 0 10px;
}

div.tab_content {
  background-color: #333;
  color: #fff;
}

div.tab_content p {
  padding: 10px;
}

Заранее большое спасибо!

Answer 1

[no_one_safe]

1. Вместо клика на < li> отлавливайте клик на < a>
2. У вас ссылки и контейнеры одинаковый класс содержат - tab1, лучше разделить.
3. В чем вопрос? Что у вас не получается? Чего вы хотите добиться?

Comments

[wagwandude]

Загрузил скрипт на JSFiddle - https://jsfiddle.net/1fsq7j46/
Функция клика работает отлично, однако setInterval не работает так, как нужно (должен через опр. время переключать вкладку), т.к. передается Object Window в this значение, а мне нужно передать ul.tabs li

[no_one_safe]

Оно? https://jsfiddle.net/8soe3frm/

[wagwandude]

no_one_safe: Спасибо! Оказалось настолько просто. Не подскажешь, как мне обновить setInterval до того же значения при клике?

[no_one_safe]

wagwandude: Не понял вопроса. Что обновить??

[wagwandude]

no_one_safe: Поставил обновление каждые три секунды. При клике на какую-нибудь вкладку резко перекидывает на следующую. Нужно сделать так, чтобы при клике на ul.tabs li setInterval обновлял свой отчет заново. Т.е. кликнул на вторую вкладку и setInterval начал отчет с трех секунд

[no_one_safe]

wagwandude: https://jsfiddle.net/8soe3frm/1/

[wagwandude]

no_one_safe: Спасибо! :)

[Алексей Зуев]

Можно спросить? А зачем в вашем решении bind(this)?