Question

我是jQuery的新手。

我有一个html代码，如下所示，它是动态生成的，并添加到我的页面中：


<div class="outstandingcallback">
<span>a</span>
<span>b</span>
</div>
<div class="outstandingcallback">
<span>c</span>
<span>d</span>
</div>
    ......

当我点击另一个时，我需要隐藏其中一个。我使用了以下jQuery，但我不确定如何隐藏div元素。


    $('.outstandingcallback').bind('click', function () {
                var selectdCallItemID = $(".callItemID", this).html();


                var myHtmlCode = $('#CallBacks').html();

                $('' + myHtmlCode + '').find('div').each(function () {
                    var thisCallID = $(".callItemID", this).html();

                    if (thisCallID == selectdCallItemID ) {
                        alert("test");
                        $('' + myHtmlCode + '').find(this).hide();
                    }
                });
            });

我不确定以下部分：


    $('' + myHtmlCode + '').find(this).hide();

Answer 1

您可以使用.siblings()查找同级别的其他元素：

因为 which is generated on the fly and added to my page使用.on 并将事件委托给最近的现有父级或document

 $(document).on('click', '.outstandingcallback', function () {
    $(this).siblings('.outstandingcallback').hide();
 });

Answer 2

尝试这样的事情，FIDDLE

 $('.outstandingcallback').bind('click', function () {
     $('.outstandingcallback').hide(); 
     $(this).show(); 
});

Answer 3

<script>
 function doAnimation()
 {
    $("#secondDiv").toggle(300);
 }
  </script>


 <div id='firstDiv' onclick='doAnimation()'></div>
 <div id='secondDiv' ></div>

Answer 4

if($(".outstandingcallback:first").click()) {
    $(".outstandingcallback:first").show();
    $(".outstandingcallback:last").hide();
} else if ($(".outstandingcallback:last").click()) {
    $(".outstandingcallback:first").hide();
    $(".outstandingcallback:last").show();
}

Answer 5

只需隐藏未被点击的div所需的一切就是：

 $(function(){
    $('.outstandingcallback').on('click', function () {
        $(this).siblings().hide();
    });
})

使用jQuery单击其他div后隐藏特定的div

5 个答案: