Как запретить работу скрипта?

520
06 февраля 2017, 17:35

Как по нажатию на input запретить или разрешить выполнение скрипта?

<input class="checkbox" type="checkbox" id="news" name="news" value="1"> 
<label for="news">Скрыть новости</label>
$('.boxx').each(function(){
   if($(this).find('a').hasClass('viewsfull')){
   $(this).hide()
   }
}) 
Answer 1

Мне кажется, вы немного не поняли задачу. Код выполняется единожды, а не постоянно. Когда вы скрываете новости, это одно действие, и когда оно завершено, ничего фактически не происходит. Чтобы показать снова новости, вам нужно еще один раз выполнить скрипт, который покажет новости.

Например вы ставите обработчик события на checkbox news:

$('#news').on('change', function(){
...здесь ваш код...
})

Этот скрипт будет выполнятся каждый раз, когда вы ставите и убираете галочку в checkbox. И после выполнения браузер не будет выполнять никаких скриптов, до тех пор, пока не получит следующее событие.

Писать еще один обработчик события не нужно, нам нужно в этом-же определить, нажата галочка или нет:

$('#news').on('change', function(){
    if($(this).is(':checked')){
         //галочка нажата, скрываем новости
    }else{
         //галочка не нажата, показываем новости 
    }
})

Далее мы ставим ваш код:

$('#news').on('change', function(){
    if($(this).is(':checked')){
         //галочка нажата, скрываем новости
         $('.boxx').each(function(){
            if($(this).find('a').hasClass('viewsfull')){
               $(this).hide()
            }
         }) 
    }else{
         //галочка не нажата, показываем новости 
    }
})

А если мы нажимаем уже второй раз, $("this").is(':checked') будет уже не верно, и там нужно новости показать, возьмем тот-же код, но заменим hide() на show()

$('#news').on('change', function(){
    if($(this).is(':checked')){
         //галочка нажата, скрываем новости
         $('.boxx').each(function(){
            if($(this).find('a').hasClass('viewsfull')){
               $(this).hide()
            }
         }) 
    }else{
         //галочка не нажата, показываем новости 
         $('.boxx').each(function(){
            if($(this).find('a').hasClass('viewsfull')){
               $(this).show()
            }
         }) 
    }
})

Рабочий пример:

$('#news').on('change', function() { 
  if ($(this).is(':checked')) { 
    //галочка нажата, скрываем новости 
    $('.boxx').each(function() { 
      if ($(this).find('a').hasClass('viewsfull')) { 
        $(this).hide() 
      } 
    }) 
  } else { 
    //галочка не нажата, показываем новости  
    $('.boxx').each(function() { 
      if ($(this).find('a').hasClass('viewsfull')) { 
        $(this).show() 
      } 
    }) 
  } 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<input class="checkbox" type="checkbox" id="news" name="news" value="1"> 
<label for="news">Скрыть новости</label> 
<div class="boxx"><a href="#" class='viewsfull'>Новость</a> 
</div>

Есть еще одна функция, которая упростит скрипт: toggle() Она скрывает объекты, если они видимы и показывает, если они скрыты. Т.е все можно упростить до такого:

$('#news').on('change', function(){
         $('.boxx').each(function(){
            if($(this).find('a').hasClass('viewsfull')){
               $(this).toggle()
            }
         }) 
})

Pavel Mayorov также указал на то, что проще использовать селектор :has, чтобы сразу найти блоки, имеющие ссылку с определенным классом:

$('#news').on('change', function(){
         $('.boxx:has(a.viewsfull)').toggle()
})
Answer 2

Чтоб код выполнялся только при условии, то создайте это условие. Например вы можете накинуть функцию на событие, например изменение в input.

$('#input').on('input', function() { 
  console.log(this.value); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<input id="input" type="text">

READ ALSO
Скролл к концу содержимого элемента

Скролл к концу содержимого элемента

Есть <li id="comment55">много контента</li>Как прокрутить страницу к концу контента comment55?

451
Подобие display для текста

Подобие display для текста

Здравствуйте!

397
Отрисовка 3D в FireFox

Отрисовка 3D в FireFox

Можно было дополнить: ужасная отрисовка 3D в FirefoxКороче, вот картинка: Хром сглаживает и оптимизирует, с этой же непомерной задачей справляется...

401