Как по нажатию на 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()
}
})
Мне кажется, вы немного не поняли задачу. Код выполняется единожды, а не постоянно. Когда вы скрываете новости, это одно действие, и когда оно завершено, ничего фактически не происходит. Чтобы показать снова новости, вам нужно еще один раз выполнить скрипт, который покажет новости.
Например вы ставите обработчик события на 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()
})
Чтоб код выполнялся только при условии, то создайте это условие. Например вы можете накинуть функцию на событие, например изменение в 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">
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости