如果选中复选框，则启动动画。
如果选中复选框，则启动动画。
提问于 2017-11-27 14:31:45
我想启动一个网站上的动画，但只有我，一个特定的复选框被选中，但我无法找到如何做它。你们能帮帮我吗？
现在我得到了这个：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>
<script>
$(document).ready(
if (document.getElementById('#slide-1').checked){
function animation(){
$('.sl-art').fadeOut(1000);
$('#sl-art-1').fadeIn(1000);
}
}
else if (document.getElementById('#slide-2').checked){
function animation(){
$('.sl-art').fadeOut(1000);
$('#sl-art-2').fadeIn(1000);
}
}
else if (document.getElementById('#slide-3').checked){
function animation(){
$('.sl-art').fadeOut(1000);
$('#sl-art-3').fadeIn(1000);
}
}
);
</script>
</head>
<body>
<div id="sl-principal">
<div id="sl-lucarne">
<article class="sl-art" id="sl-art-1">
<h2>Premier article</h2>
<p>Premier slide</p>
</article>
<article class="sl-art" id="sl-art-2">
<h2>Deuxième article</h2>
<p>Deuxième slide</p>
</article>
<article class="sl-art" id="sl-art-3">
<h2>Troisième Article</h2>
<p>Troisième slide</p>
</article>
</div>
</div>
<article class="checkbox">
<label for="sl-art-1"><input type="radio" name="slide" value="slide-1" id="slide-1">Slide 1</input></label>
<label for="sl-art-1"><input type="radio" name="slide" value="slide-2" id="slide-2">Slide 2</input></label>
<label for="sl-art-1"><input type="radio" name="slide" value="slide-3" id="slide-3">Slide 3</input></label>
</article>
</body>
如您所见，我想要淡出到某一幻灯片，取决于巫婆框被选中。
谢谢你的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-27 16:37:24
您的HTML和javascript目前存在重大问题。
<input>应该是自关闭的；如果<label>包装了一个元素(更不用说for属性的重复值)，它就不需要for属性；$(document).ready()接受函数句柄、闭包或箭头函数；声明function animation()时不会调用它；document.getElementById需要精确的id值，而不是CSS样式选择器(删除#符号)。
撇开所有这些，并将一个更改事件侦听器添加到您的收音机中，代码就可以工作了。您只是在标记和javascript方面有很多小问题。所有这些都被清理干净了，你有了这个：
$(document).ready(function(){
$('input:radio').on('change', function(){
if (document.getElementById('slide-1').checked){
$('.sl-art').fadeOut(1000);
$('#sl-art-1').fadeIn(1000);
}
else if (document.getElementById('slide-2').checked){
$('.sl-art').fadeOut(1000);
$('#sl-art-2').fadeIn(1000);
}
else if (document.getElementById('slide-3').checked){
$('.sl-art').fadeOut(1000);
$('#sl-art-3').fadeIn(1000);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sl-principal">
<div id="sl-lucarne">
<article class="sl-art" id="sl-art-1">
<h2>Premier article</h2>
<p>Premier slide</p>
</article>
<article class="sl-art" id="sl-art-2">
<h2>Deuxième article</h2>
<p>Deuxième slide</p>
</article>
<article class="sl-art" id="sl-art-3">
<h2>Troisième Article</h2>
<p>Troisième slide</p>
</article>
</div>
</div>
<article class="checkbox">
<label><input type="radio" name="slide" value="slide-1" id="slide-1">Slide 1</label>
<label><input type="radio" name="slide" value="slide-2" id="slide-2">Slide 2</label>
<label><input type="radio" name="slide" value="slide-3" id="slide-3">Slide 3</label>
</article>
Stack Overflow用户
发布于 2017-11-27 14:52:13
试试这个.Here是小提琴
HTML：
<div id="sl-principal">
<div id="sl-lucarne">
<article class="sl-art" id="sl-art-1">
<h2>Premier article</h2>
<p>Premier slide</p>
</article>
<article class="sl-art" id="sl-art-2">
<h2>Deuxième article</h2>
<p>Deuxième slide</p>
</article>
<article class="sl-art" id="sl-art-3">
<h2>Troisième Article</h2>
<p>Troisième slide</p>
</article>
</div>
</div>
<article class="checkbox">
<label for="sl-art-1"><input type="radio" class='slides' name="slide" data-key='1' value="slide-1" id="slide-1">Slide 1</input></label>
<label for="sl-art-2"><input type="radio" class='slides' name="slide" data-key='2' value="slide-2" id="slide-2">Slide 2</input></label>
<label for="sl-art-3"><input type="radio" class='slides' name="slide" data-key='3' value="slide-3" id="slide-3">Slide 3</input></label>
</article>联署材料：
$(document).ready(function(){
$('.slides').click(function(e){
$('.sl-art').fadeOut(1000);
$('#sl-art-'+parseInt(e.target.dataset.key)).fadeIn(1000);
});
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47513354
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号