Переключить видимость элемента с помощью Zepto

HTML:

<a id="the_link" class="folded" href="#">Click me</a>
<div id="content">This is some content to be toggled.</div>

Две функции, каждая из которых показывает или скрывает содержимое:

function shower() {
  $("body").on("click", "#the_link.folded", function(event) {
    $("#content").show();
    $("#the_link").html("Hde info").removeClass("folded").addClass("unfolded");
  });
}

function hider() {
  $("body").on("click", "#the_link.unfolded", function(event) {
    $("#content").hide();
    $("#the_link").html("See more info").removeClass("unfolded").addClass("folded");
  });
}

Если я использую jQuery, код работает:

$(document).ready(function() {  
  shower();
  hider();
})

Если я использую Zepto, код не работает:

Zepto(function($){  
  shower();
  hider();
})

Почему?


jquery zepto
person Fellow Stranger    schedule 07.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

совершенно странно, я действительно не использовал zepto раньше. Но вы правы, что-то не так в самой библиотеке (или так они работают).

проблема в том, что привязка, даже если элемент еще не существует, не будет работать.

И что, если вы измените класс элемента на лету, то же самое событие будет по-прежнему привязано к нему, даже если класс изменился. поэтому вам нужно использовать off, чтобы отменить привязку события, а затем повторно привязать его в другой функции и наоборот. jsfiddle

function shower() {
  $("body").on("click", "#the_link.folded", function(event) {
      console.log('shower function');
    $("#content").show();
    $("#the_link").removeClass("folded").addClass("unfolded").html("Hde info");
       $("body").off("click", "#the_link.folded");
      hider();
  });
}

function hider() {

  $("body").on("click", "#the_link.unfolded",function(event) {
      console.log('hider function');
    $("#content").hide();
    $("#the_link").removeClass("unfolded").addClass("folded").html("See more info");
      $("body").off("click", "#the_link.unfolded");
      shower();
  });
}


  shower();
  hider();
person Hussein Nazzal    schedule 08.10.2013