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上遇到很多小问题。所有这些都清理完了，你有这个：

＆＃13;

$(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);
        }
    });
});

＆＃13;

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

＆＃13;

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

2 个答案: