Question

我正在玩Jquery和JS，以获得基础知识，我面临以下问题：

我有5段。当我点击一个段落（vraag）时，它将显示另一个段落（antwoord）。然后，当我按下“Antwoord”时，我必须再次隐藏。现在我为每个Vraag / Antwoord编写了一个新功能。我正在寻找一种方法来写这么多！我一直在四处寻找，并自己做了一些头脑风暴，但我无法想出一些东西。我现在写它的方式非常草率。

另外，当我按“vraag”，然后按“antwoord”再次隐藏它，它将切换3次。我不确定是什么导致了这个问题！

希望有人可以帮我解决这个问题，并启发我！ :)

Thxx！

代码：

<hmtl>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#vraag1").click(function(){
                $("#antwoord1").toggle('normal');
                $("#antwoord1").click(function(){
                    $("#antwoord1").toggle('normal');   
                });
            });
            $("#vraag2").click(function(){
                $("#antwoord2").toggle('normal');
                $("#antwoord2").click(function(){
                    $("#antwoord2").toggle('normal');   
                });
            });
            $("#vraag3").click(function(){
                $("#antwoord3").toggle('normal');
                $("#antwoord3").click(function(){
                    $("#antwoord3").toggle('normal');   
                });
            });
            $("#vraag4").click(function(){
                $("#antwoord4").toggle('normal');
                $("#antwoord4").click(function(){
                    $("#antwoord4").toggle('normal');   
                });

            });
            $("#vraag5").click(function(){
                $("#antwoord5").toggle('normal');
                $("#antwoord5").click(function(){
                    $("#antwoord5").toggle('normal');   
                });                 
            });
        });

    </script>
    <style type="text/css">
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <p id="vraag1"> vraag 1 </p>
    <p class="hidden" id="antwoord1"> antwoord1 </p>
    <p id="vraag2"> vraag 2 </p>
    <p class="hidden" id="antwoord2"> antwoord2 </p>
    <p id="vraag3"> vraag 3 </p>
    <p class="hidden" id="antwoord3"> antwoord3 </p>
    <p id="vraag4"> vraag 4 </p>
    <p class="hidden" id="antwoord4"> antwoord4 </p>
    <p id="vraag5"> vraag 5 </p>
    <p class="hidden" id="antwoord5"> antwoord5 </p>
</body>
</hmtl>

Answer 1

首先，您应该更改HTML以使用类而不是（或除了）ids：

<p class="vraag"> vraag 1 </p>
<p class="hidden antwoord"> antwoord1 </p>
<p class="vraag"> vraag 2 </p>
<p class="hidden antwoord"> antwoord2 </p>

然后重写click事件处理程序以利用HTML的类和结构：

$(".vraag").click(function(){
    $(this).next(".antwoord").toggle('normal');
});

我没有为上面click设置.antwoord处理程序，因为每次点击.vraag时，最终会设置一个附加点击处理程序（你可以在你自己的代码中放一个alert来看看我的意思。）

而不是这样，我们可以像.antwoord那样为.vraag设置一次返回正常切换：

$(".antwoord").click(function(){
    $(this).toggle('normal');   
});

这就是全部 - 两个最小事件处理程序现在将处理任何数量的内容。

Answer 2

我正在寻找一种方法来写这么短的时间！

我看到的最短代码对您当前的HTML代码没有任何修改，是：

$('p').click(function(){
    $(this).next().hasClass('hidden') ? $(this).next().toggle('normal') : $(this).toggle('normal');
});

请注意，我的回答并不是最适合的，不应该在您的网站上使用。

有关正常工作的演示，请参阅this fiddle。

Answer 3

使用带有^的属性选择器，这将获得所有以给定字符串开头的元素并为antwoord外部的vraag调用单独的点击事件（不在$(document).ready(function(){ $("p[id^='vraag']").click(function(){ $(this).next('p').toggle('normal'); }); $("p[id^='antwoord']").click(function(){ $(this).toggle('normal'); }); });的点击事件内），将其保留在内部，您需要额外的点击事件以便vraag工作...

试试这个

{{1}}

Jquery .toggle - 一种写得更短的方法吗？

3 个答案: