Выполнение 2х функций в одном файле javascript

203

25 октября 2017, 05:30

Изобретаю велосипед, и столкнулась с проблемой. Есть код, в котором должны обрабатываться 2 клика. Проблема в том, что вторая часть не срабатывает в файле, но срабатывает в консоли.

$(document).ready(function () {
  var a = $(".aside-list");
  $(a).click(function() {
    $(a).not(this).addClass("hidden");
    $(this).addClass("vis");
  });
  $(".vis").click(function hide() {
    $(a).removeClass("hidden") ;
    $(a).removeClass("vis") ;
  });
})

Answer 1

Когда пишешь так $(".vis").click( - то обработчик навешивается "вникуда", т.к. такого элемента на странице нет. Попробуй так:

$(document).on('click', '.vis', function(){
// ...
});

Вместо document лучше поставить селектор элемента, который является родителем по отношению к .vis

например если html такой

<div id="test">
    <a href="#" class="aside-list">Hello</a>
</div>

то лучше писать

$('#test').on('click', '.vis', function(){
// ...
});

Не знаю, эта ли логика затевалась

  var a = '.aside-list'; 
  $('#test').on('click', a, function(e){   
    e.preventDefault(); 
    $(a).not(this).addClass("hidden"); 
    $(this).addClass("vis"); 
  }); 
   
  $('#test').on('click', '.vis', function(e){       	 
    e.preventDefault(); 
    $(a).removeClass("hidden"); 
    $(a).removeClass("vis") ; 
  });

.hidden { 
  color: red; 
} 
 
.vis { 
  border: 1px solid green; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="test"> 
    <a href="#" class="aside-list">11</a> 
    <a href="#" class="aside-list">22</a> 
    <a href="#" class="aside-list">33</a>   
</div>