javascript，如果选中复选框则启动动画

Question

我想在网站上启动动画，但只有我选中了某个复选框，但我找不到如何操作。你们能帮帮我吗？

现在我得到了这个：

<!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>

如您所见，我想根据选中的框淡入到某张幻灯片。

感谢您的帮助。

Answer 1

试试这个。这是 fiddle

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>

JS:

 $(document).ready(function(){
   $('.slides').click(function(e){
     $('.sl-art').fadeOut(1000);
     $('#sl-art-'+parseInt(e.target.dataset.key)).fadeIn(1000);
   });
 });

Answer 2

您的 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>

javascript，如果选中复选框则启动动画

javascript, initiate animation if checkbox is checked

javascript

html

if-statement

jquery-animate

checked