Question

我的浏览器左侧有一个聊天支持，我想用jQuery显示和隐藏它，我已经通过使用show（）和hide（）函数来实现它，但是当我想要应用它时jQuery对后续层的影响它什么都不做，它只适用于第一个元素，我想问的是：

最好的方法是什么，我学习jQuery并且已经用这个库完成了一些小事情，但是如果不复制和粘贴相同的效果我就无法知道如何做到这一点，我使用＆＃34; for＆＃34;方法？

我在下面用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>

使用Javascript：

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

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

链接到JS小提琴：

http://jsfiddle.net/45hsd6dp/

提前致谢。

Answer 1

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

当触发click事件时，您需要为show和hide函数提供上下文。使用当前脚本，您告诉jQuery：

每当为类.show_control的任何元素注册点击事件时，请显示具有类.show_item的所有项。

请注意，您的函数中没有绑定到click事件的上下文。

要让您的事件听取上下文，请始终使用$(this)，这会将功能限制为感兴趣的元素：

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

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

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

点击.show_control后，立即搜索具有.show_item类的下一个兄弟，并显示它。

看到该语句具有上下文，因为$(this)将jQuery限制为被单击元素的上下文。 根据您的标记，您将不得不依赖各种jQuery方法来横向DOM ，例如.next()，.prev()，.parent()，{{1} }，.parents()，.find()，.children()等。所有这些函数都在jQuery API上有详细记录，请确保检查出来。

请参阅此处的小提琴：http://jsfiddle.net/teddyrised/45hsd6dp/6/

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

1 个答案: