Question

创建一个jQuery函数，淡化所有被点击的对象。

这是一个作业问题。我在创建一个淡化任何对象/元素的单个函数时遇到问题。

我创建了四个段落和四个按钮，其中我创建了四个jQuery函数;每当我点击一个按钮就会淡出一个段落。

现在问题需要一个jquery函数来执行指定的任务。请帮我提一些关于如何做的提示。

<!DOCTYPE html>
<html lang="en">
    <head>
       <title>JQuery in Action</title>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#test1").click(function(){
            $("#heading1").fadeOut();
            });
        });

        $(document).ready(function(){
            $("#test2").click(function(){
            $("#paragraph1").fadeOut();
            });
        });

        $(document).ready(function(){
            $("#test3").click(function(){
            $("#heading2").fadeOut();
            });
        });

        $(document).ready(function(){
            $("#test4").click(function(){
            $("#paragraph2").fadeOut();
            });
        });

    </script>
</head>
<body>
    <button id="test1">For Heading 1</button>
    <button id="test2">For Paragraph 1</button>
    <button id="test3">For Heading 2</button>
    <button id="test4">For Paragraph 2</button>

    <h1 id="heading1">Learning the basics of JQuery - JQuery in Action</h1>
    <p id="paragraph1">
        Lorem ipsum dolor sit amet, mel aeterno propriae id, dolore pertinacia eu vix. 
    </p>

    <h1 id="heading2">Testing continue - JQuery in Action</h1>
    <p id="paragraph2">
        Lorem ipsum dolor sit amet, mel aeterno propriae id, dolore pertinacia eu vix. 
    </p>

</body>

Answer 1

先生，它可以帮助你。

<!DOCTYPE html>
<html lang="en">
    <head>
       <title>JQuery in Action</title>
</head>

<body>
    <button data-target="heading1">For Heading 1</button>
    <button data-target="paragraph1">For Paragraph 1</button>
    <button data-target="heading2">For Heading 2</button>
    <button data-target="paragraph2">For Paragraph 2</button>

    <h1 id="heading1">Learning the basics of JQuery - JQuery in Action</h1>
    <p id="paragraph1">
        Lorem ipsum dolor sit amet, mel aeterno propriae id, dolore pertinacia eu vix. 
    </p>

    <h1 id="heading2">Testing continue - JQuery in Action</h1>
    <p id="paragraph2">
        Lorem ipsum dolor sit amet, mel aeterno propriae id, dolore pertinacia eu vix. 
    </p>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").on('click', function(event) {
                var target = $(this).data('target');
                $("#" + target).fadeOut();

                event.preventDefault();
            });

        });
    </script>

</body>
</html>

Answer 2

在这里做一些研究并阅读fadein（）。他们提供了一些很好的例子来帮助你！ - ＆GT; http://api.jquery.com/fadein/

一个影响任何对象的jQuery函数

2 个答案: