试图在jQuery中找到更好的方法

时间:2017-04-20 15:22:00

标签: javascript jquery

我是jQuery的新手,写了一些jQuery代码,当用户点击每个团队的团队徽标时,显示每个足球队的信息。

我使用index()来确定点击了哪个<div>元素。

我认为,如果不使用index()来编写此代码,并且未指定带有<p>类的a,b and c元素,则必须更好地编写此代码。

希望你能提供帮助,这是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
        .w3-card{
            width: 30%;
            margin-right: 10px;
            background-color: gainsboro;
            cursor: pointer;
            display: inline-block;
        }

        /*.w3-card:hover{*/
               /*background-color: #B0B0B0;*/
        /*}*/

        p{
            text-align: center;
            font-family: Arial, sans-serif;
            font-weight: bold;
        }

        img{
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

        .container{
            width: 50%;
            margin: auto;
        }

        .imgc{
            margin-left: 20px;
            margin-right: -20px;
        }

        .info{
            width: 100%;
            background-color: #82ABE5;
            display: none;
            padding: 5px;
        }

    </style>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>

        $(function () {

            var a = "Juventus is one of the strongest team in Italy";
            var b = "Barcelona is a spanish team";
            var c = "Real madrid has the most awards in europe";

            $('.w3-card').hover(function () {
                $(this).css("background-color", "#B0B0B0");
            },
            function () {
                $(this).css("background-color", "gainsboro");
            });

            $('.w3-card').click(function () {
                var index = $(this).index();

                $('.info').slideUp(400, function () {
                    $('p.a').hide();
                    $('p.b').hide();
                    $('p.c').hide();

                   if(index == 0){
                       $('.info').slideDown(400);
                       $('.a').show();
                   }
                   if(index == 1){
                       $('.info').slideDown(400);
                       $('.b').show();
                   }
                   if(index == 2){
                       $('.info').slideDown(400);
                       $('.c').show();
                   }

                });
            })

        });

    </script>
</head>
<body>

    <div class="container">
        <div class="imgc">
                <div class="w3-panel w3-card"><img src="img/juve.png"><p>Juventus</p></div>
                <div class="w3-panel w3-card"><img src="img/barca.png"><p>Barcelona</p></div>
                <div class="w3-panel w3-card"><img src="img/real.png"><p>Real Madrid</p></div>
        </div>

        <div class="info">
            <p class="a">Juventus Football Club colloquially known as Juve  is a professional Italian association football club based in Turin, Piedmont.</p>
            <p class="b">Futbol Club Barcelona commonly known as Barcelona and familiarly as Barça is a professional football club based in Barcelona, Catalonia, Spain.</p>
            <p class="c">Real Madrid Club de Fútbol Royal Madrid Football Club), commonly known as Real Madrid, or simply as Real outside Spain frontiers, is a professional football club based in Madrid, Spain.</p>
        </div>

    </div>

</body>
</html>

2 个答案:

答案 0 :(得分:2)

执行此操作的一种方法是在可点击元素上设置自定义data-*属性。你已经在使用一个普通的类了,所以这并没有太大的改变:

<div class="w3-panel w3-card" data-target="a">

然后使用它:

$('.w3-card').click(function () {
    var target = $(this).data("target");
    $('.info').slideUp(400, function () {
        $('.info').slideDown(400);
        $('.' + target).show();
    });
});

答案 1 :(得分:0)

在我看来,最好的重构是将信息拉出到一个javascript变量中,这样你就不会有这么多的dom元素。随着页面上更多的足球/足球队,可能很难管理。

使用此重构,您将创建一个对象来保存所有团队的信息,然后在单击其中一个图像时插入#info div。这是代码。

&#13;
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
        .w3-card{
            width: 30%;
            margin-right: 10px;
            background-color: gainsboro;
            cursor: pointer;
            display: inline-block;
        }

        /*.w3-card:hover{*/
               /*background-color: #B0B0B0;*/
        /*}*/

        p{
            text-align: center;
            font-family: Arial, sans-serif;
            font-weight: bold;
        }

        img{
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

        .container{
            width: 50%;
            margin: auto;
        }

        .imgc{
            margin-left: 20px;
            margin-right: -20px;
        }

        #info{
            width: 100%;
            background-color: #82ABE5;
            display: none;
            padding: 5px;
        }

    </style>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>

        $(function () {

            var a = "Juventus is one of the strongest team in Italy";
            var b = "Barcelona is a spanish team";
            var c = "Real madrid has the most awards in europe";

            var info = {
                juve: 'Juventus Football Club colloquially known as Juve  is a professional Italian association football club based in Turin, Piedmont.',
                barca: 'Futbol Club Barcelona commonly known as Barcelona and familiarly as Barça is a professional football club based in Barcelona, Catalonia, Spain.',
                real: 'Real Madrid Club de Fútbol Royal Madrid Football Club), commonly known as Real Madrid, or simply as Real outside Spain frontiers, is a professional football club based in Madrid, Spain.'
            };

            $('.w3-card').hover(function () {
                $(this).css("background-color", "#B0B0B0");
            },
            function () {
                $(this).css("background-color", "gainsboro");
            });

            $('.w3-card').click(function () {
                var team = $(this).data('team');

                $('#info').slideUp(400, function () {

                    $('#info').html('<p>' + info[team] + '</p>').slideDown(400);

                });
            })

        });

    </script>
</head>
<body>

    <div class="container">
        <div class="imgc">
                <div class="w3-panel w3-card" data-team='juve'><img src="img/juve.png"><p>Juventus</p></div>
                <div class="w3-panel w3-card" data-team='barca'><img src="img/barca.png"><p>Barcelona</p></div>
                <div class="w3-panel w3-card" data-team='real'><img src="img/real.png"><p>Real Madrid</p></div>
        </div>

        <div id="info"></div>

    </div>

</body>
</html>
&#13;
&#13;
&#13;