获取元素的数据标签并回显值[jQuery]

Question

我的页面中有两个共享按钮，我想从每个元素中获取数据标签，并在特定的div中显示它。

到目前为止，这是我的代码

$('.social-toggle').on('click', function () {
    $('.social-networks').not($(this).next()).removeClass('open-menu')
    $(this).next().toggleClass('open-menu');
});

$('.social-networks [class^="social-"]').hover(function () {
    $("#hide").removeClass("hide");
    $('.txt').text($(this).data('label')).show(0);
}, function () {
    $("#hide").addClass("hide");
    $('.txt').text('').hide(0);
});

我的第一个元素是显示数据，但是next按钮没有显示值。你们能看看我的代码出了什么问题吗。

这是我的HTML

<div class="share-button "> <a href="#" class="social-toggle">Share</a>

    <div class="social-networks">
        <ul>

            <div id="hide" class="hide"><div class="txt"></div></div>
            <li class="social-twitter" data-label="Twitter"> <a href="http://www.twitter.com">T</a>

            </li>
            <li class="social-facebook" data-label="Facebook"> <a href="http://www.facebook.com">F</a>

            </li>
            <li class="social-gplus" data-label="Google +"> <a href="http://www.gplus.com">G+</a>

            </li>
        </ul>
    </div>
</div>

这里还有JSFIDDLE工作演示

Answer 1

ID必须是唯一的。$("#hide")只选择具有此ID的第一个元素。

$("#hide").removeClass("hide");

只使第一个DIV中的元素可见，而不显示第二个DIV中的元素。

使用相对DOM导航：

$(this).siblings(".hide").removeClass("hide");

修正Fiddle