Javascript 如何防止WordPress帖子页面中所有帖子触发点击功能？

我使用以下jQuery来显示社会共享选项。但问题是，当我为单个帖子单击

.fa share alt

时，它会为所有帖子触发

(function($) {
    "use strict";
    function initsocialShare(){
        $(".fa-share-alt").click(function(){
            $(".fa-share-alt").hide();
            $(".fa-times").show();
            $(".share").show();
        });
        $(".fa-times").click(function(){
            $(".fa-share-alt").show();
            $(".fa-times").hide();
            $(".share").hide();
        });
    }


    $(document).ready(function() {

        initsocialShare();

    });

})(jQuery);// End main function

HTML代码：

<div class="share">
    <div class="widget-share">
        <!-- share-wrapper start -->
        <div class="share-wrapper">
            <!-- social start -->
            <div class="social">
                <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
            </div>
            <!-- social end -->
        </div>
        <!-- share-wrapper end -->
    </div>
</div>
<i id="<?php the_ID(); ?>" class="fa fa-share-alt" aria-hidden="true"></i>
<i id="<?php the_ID(); ?>" class="fa fa-times" aria-hidden="true"></i>

function initsocialShare(){
        $(".social-share-container .fa-share-alt").click(function(){
            $(this).hide();
             $(this).siblings('.fa-times').show();
            $(this).siblings(".share").show();
        });
        $(".social-share-container .fa-times").click(function(){
            $(this).hide();
             $(this).siblings(".fa-share-alt").show();
             $(this).siblings(".share").hide();
        });
    }

因为您使用了
$（“.share”）
，所以它将针对所有具有类共享的元素。jQuery中的Click函数将参数target作为eventObject，您可以在其中获得目标has just Click。获得目标后，根据需要，可以显示和隐藏目标的同级元素



我通过更改HTML和jQuery代码得出如下结论：


HTML

<div class="social-share-container">
                            <i id="<?php the_ID(); ?>" class="fa fa-share-alt" aria-hidden="true"></i> 
                        <i id="<?php the_ID(); ?>" class="fa fa-times" aria-hidden="true"></i>
                        <span class="latest-news--comments" style="float: right;">
                            <i class="fa fa-comment" aria-hidden="true"></i>
                            <?php printf( _nx( '', '%1$s', 'comments title', get_comments_number(), 'goalkick' ), number_format_i18n( get_comments_number() ) ); ?>
                        </span>
                        <div class="share"> 
                            <div class="widget-share">
                                <!-- share-wrapper start -->
                                <div class="share-wrapper">
                                    <!-- social start -->
                                    <div class="social">
                                        <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                                    <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                                    <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                                    <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                                    <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                                    <i class="fa fa-facebook social-btn facebook" aria-hidden="true"></i>
                                    </div><!-- social end -->
                                </div><!-- share-wrapper end -->
                            </div>
                        </div>
                        </div><!-- social-share-container end -->

感谢您的努力，但它显示了以下消息：uncaughttypeerror:event.target.hide不是function@bdtheme刚刚更新了我的答案，我把javascript和jquery搞错了
function initsocialShare(){
        $(".social-share-container .fa-share-alt").click(function(){
            $(this).hide();
             $(this).siblings('.fa-times').show();
            $(this).siblings(".share").show();
        });
        $(".social-share-container .fa-times").click(function(){
            $(this).hide();
             $(this).siblings(".fa-share-alt").show();
             $(this).siblings(".share").hide();
        });
    }