По умолчанию заголовок и баннер должны быть скрыты, когда пользователь установил переключатель #show, контейнеры заголовка и баннера станут видимыми. В случае, если вы отметили любую другую радиокнопку, скрытие заголовка и баннера.
<main>
<div class="container">
<form action="/" id="form">
<input type="radio" id="radio-1">
<input type="radio" id="radio-2">
<input type="radio" id="show">
</form>
</div>
<div class="container">Title</div>
<div class="container">Banner</div>
<div class="container">Some content</div>
</main>
var itemHide = [0, 1];
var $form = $('#form');
if ($form.length > 0) {
hideTeaser();
radioAction();
}
function radioAction() {
$form.click(function () {
if ($('#show').is(':checked')) {
showTeaser();
} else {
hideTeaser();
}
});
}
function hideTeaser() {
$form.parent('.container').nextAll().filter( function(index, el) {
return $.inArray(index, itemHide) > -1;
}).hide();
}
function showTeaser() {
$form.parent('.container').nextAll().filter( function(index, el) {
return $.inArray(index, itemHide) > -1;
}).show();
}
2 ответа
Попробуйте использовать этот.
<main>
<div class="container">
<form action="/" id="form">
<input type="radio" name="content" value="radio1">
<input type="radio" name="content" value="radio2">
<input type="radio" name="content" value="show">
</form>
</div>
<div class="container">Title</div>
<div class="container">Banner</div>
<div class="container">Some content</div>
</main>
$(document).ready(function() {
$('div:contains("Title")').css('display','none');
$('div:contains("Banner")').css('display','none');
$("input[name$='content']").click(function() {
var test = $(this).val();
if(test == 'show'){
$('div:contains("Title")').show();
$('div:contains("Banner")').show();
}
else{
$('div:contains("Title")').hide();
$('div:contains("Banner")').hide();
}
});
});
Посмотри на это
https://api.jquery.com/toggle/
Переключатель jQuery упрощает то, что вы пытаетесь сделать.
Похожие вопросы
Новые вопросы
jquery
jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript. jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.