0

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

我有5段。当我单击一个段落（vraag）时，它将显示另一个段落（antwood）。再一次，当我按下“Antwoord”时，我不得不再次隐藏。现在我已经为每个 Vraag/Antwoord 编写了一个新函数。我正在寻找一种方法来写这个更短！我一直在环顾四周，并自己进行了一些头脑风暴，但我无法想出一些东西。我现在写它的方式非常草率。

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

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

谢谢！

编码：

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

3 回答 3

2

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

<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');   
});

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

于 2013-04-09T09:15:41.633 回答
1

我正在寻找一种方法来写这个更短！

我看到的最短代码是：

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

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

请参阅此小提琴以获取工作演示。

于 2013-04-09T09:29:34.557 回答
0

使用属性选择器^获取所有以给定字符串开头的元素，并为antwoord外部调用单独的点击事件（而不是在点击事件内部vraag）将其保留在内部您需要额外的点击事件才能使 vraag 工作...

试试这个

 $(document).ready(function(){
        $("p[id^='vraag']").click(function(){
            $(this).next('p').toggle('normal');

        });
        $("p[id^='antwoord']").click(function(){
                $(this).toggle('normal');   
            });
  });
于 2013-04-09T09:15:20.900 回答