Question

我正在尝试创建一个网站，该网站将包含一个摘要段落，其中包含扩展选项以获取有关点击的更多信息。我用这段代码完成了这个。

$(document).ready(function() {
$("#here").hide();
$("#show").click(function() {
    $("#here").show();
    $("#icond").hide();
});

$("#hide").click(function() {
    $("#here").hide();
    $("#icond").show();
});

我的问题是我希望能够在整个页面中多次使用不同的div / p元素执行此操作。

当我尝试使用类执行此操作时，它会同时打开/关闭所有类。我所知道的唯一解决方案是为每个id重新键入函数。

还有其他方法吗？

提前致谢！

https://jsfiddle.net/58roy7hg/

Answer 1

只需使用this变量即可使用特定的事件源元素。相对地识别所有其他元素。我假设你对每个块都有相同的结构。注意我已为每个块container标记添加了<p/>类。

＆＃13;

$(document).ready(function() {
    $(".here").hide();
    $(".show").click(function() {
        var container = $(this).closest(".container");
        container.find(".here").show();
        container.find(".icond").hide();
    });

    $(".hide").click(function() {
        var container = $(this).closest(".container");
        container.find(".here").hide();
        container.find(".icond").show();
    });
});

＆＃13;

p {
    width:70%;
    padding-left:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="container">This is my main text, this will display as a normal paragraph. If someone needs more information     <span class="show"> they would click here <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span>
    <span class="here"><br><span class="hide"><strong>Wow!</strong> Clicking brings up more information. When they've had enough, they'll click again and it'll go away.
    <i class="fa fa-angle-up" aria-hidden="true">^</i>
    </span></span>
</p>

<p class="container">This is great and works exactly as I want it too but there is a problem <span class="show"> ...
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span>
    <span class="here"><br><span class="hide">I need this to work over and over for different paragraphs individually.
    <i class="fa fa-angle-up" aria-hidden="true">^</i>
    </span></span>
</p>
<p class="container">Targeting classes resulted in all paragraphs colapsing at the same time<span class="show"> and
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span>
    <span class="here"><br><span class="hide">Rewriting the function for a new set of ids each time cant be the best way to do this...
    <i class="fa fa-angle-up" aria-hidden="true">^</i>
    </span></span>
</p>
<p class="container"><span class="show"> Please help!
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span>
    <span class="here"><br><span class="hide">I'm just starting out with JS, please be kind..
    <i class="fa fa-angle-up" aria-hidden="true">^</i>
    </span></span>
</p>

＆＃13;

Answer 2

最佳解决方案可能取决于您如何创建页面（php，直接HTML？）。一些香草javascript给你。当我通过php创建页面时，我会使用类似这样的内容，但对于html，它会起到相同的作用。

<div onclick="myDropdown('extraSummary1');">my visible text -click for
more</div>
<div id="extraSummary1" style="display: none;">hidden extra text</div>
<script>
function myDropdown(theDiv){
if (document.getElementById(theDiv).style.display=='none')
    { document.getElementById(theDiv).style.display='block'; }
else { document.getElementById(theDiv).style.display='none'; }
</script>

Answer 3

您必须使用this关键字，然后使用tree traversal定位您要显示的特定元素并隐藏，如上面的答案所示。我会给你的一些额外提示是：

避免多次使用document.ready。
我建议使用.on代替.click，因为它更通用，允许您向下钻取到动态添加的元素。
避免过多使用id;这将用于整个页面中不重复的元素（例如导航栏）。您id的大部分内容都可以替换为class。

试试这个示例：jsfiddle

我刚刚快速制作了一个样本（带有我自己的标记）给你看，所以你可以按照自己的意愿重新使用它，但我肯定会建议你查看文档以获得一种感觉。

JQuery：点击显示隐藏单个段落

3 个答案: