Javascript 在不同的div上使用相同效果的最佳jQuery实践是什么

我在浏览器左侧安装了聊天支持，我想使用jQuery显示和隐藏它，我已经使用了显示和隐藏功能，但是，当我想在后续层上应用相同的jQuery效果时，它什么也不做，它只适用于第一个元素，我想问的是：

最好的方法是什么？我正在学习jQuery，并用这个库做了一些小事情，但如果不复制粘贴相同的效果，我想不出如何做到这一点，我应该使用for方法吗

我在下面的代码中留下了一个JS Fiddle示例，这样你们就可以知道发生了什么：

HTML标记：

    <div id="support_left">
        <div id="support_show">
            <figure id="show_control">
                <img src="../img/chat.png" alt="Chat" />
            </figure>

            <div id="show_item">
                <p class="support_cyan">Chat with sales <span class="close">X</span></p>
            </div>
        </div>          

        <div id="support_show">
            <figure id="show_control">
                <img src="../img/call.png" alt="Call" />
            </figure>

            <div id="show_item">
                <p class="support_orange">Chat with sales <span class="close">X</span></p>
            </div>
        </div>          

        <div id="support_show">
            <figure id="show_control">
                <img src="../img/mail.png" alt="Email" />
            </figure>

            <div id="show_item">
                <p class="support_green">Chat with sales <span class="close">X</span></p>
            </div>
        </div>


    </div>

链接到JS Fiddle：

---

提前感谢。

首先，将所有ID更改为类。ID必须是唯一的，jQuery如何处理多个ID实例取决于各个浏览器/供应商决定如何使用它。该行为在技术上是未定义的，浏览器通常只选择第一次出现

触发单击事件时，需要为显示和隐藏函数提供上下文。使用当前脚本，您可以告诉jQuery：

每当为类.show\u控件中的任何元素注册单击事件时，显示具有类.show\u项的所有项

请确保函数中没有绑定到单击事件的上下文

要为事件侦听提供上下文，请始终使用$this，它将函数限制为感兴趣的元素：

$('.show_item').hide();
$('.show_control').click(function(){
    $(this).next('.show_item').show();
});

$('.close').click(function(){ 
    $(this).parent('.show_item').hide();
});

用外行的话说，函数告诉jQuery：

当.show\u控件被单击时，搜索它的立即项，下一个具有.show\u项类的同级项，然后显示它

请注意，该语句具有上下文，因为$this将jQuery限制为所单击元素的上下文。根据您的标记，您将不得不依赖各种jQuery方法来横穿DOM，例如.next、.prev、.parent、.parents、.find、.children、.side等。所有这些函数都在jQuery API上有详细的文档记录，请确保您对此进行了检查

---

请参见此处的fiddle:

ID必须是唯一的。如果您想针对多个元素，请使用类。呵呵，它很管用，非常感谢，但现在它向我显示了所有元素，显示单击的元素的最佳方式是什么？您需要使用上下文，即$this。@Alex一次一个问题使它们对其他用户最有用这实际上是我想要做的，我只想指出，没有必要使用$'。this.parent，因为我们只想在单击时隐藏元素，非常感谢您的回答！使用$this.parent隐藏要关闭的元素仍然比无上下文选择器隐藏更安全。虽然它可能与您的示例不相关，但它仍然是一种良好的实践。想象一下，如果要使用.toggle或.toggleClass，其中上下文仍然很重要。

$('.show_item').hide();
$('.show_control').click(function(){
    $(this).next('.show_item').show();
});

$('.close').click(function(){ 
    $(this).parent('.show_item').hide();
});