jQuery row.siblings无法正常工作

时间:2019-05-27 05:26:41

标签: jquery html

我有捉迷藏兄弟姐妹js函数,这里主要是3个团队

  1. 马拉巴尔
  2. Pazhassi
  3. Travancore

在此处单击马拉巴尔div时,Pazhassi和Travancore将会消失(即:我只需要带有显示按钮的马拉巴尔div详细信息即可。)

当我单击“显示”按钮时,它将返回其第一个视图,这意味着我需要所有div

我的jquery

function clickInline(id)
 {

 $('#row'+id).siblings().show('');
 }  

但是运气不好,它不起作用。这是我的js小提琴 fiddle

任何帮助将不胜感激

2 个答案:

答案 0 :(得分:2)

由于冒泡,显示按钮将触发两个功能, 如果单击的元素不是显示按钮,则需要触发第一个功能

 <div class="row" id="row1" onclick="cc(event,1)">


 function cc(event,id) {
   if(!$(event.target).is('.btn-dis')) {
     $('#row' + id).siblings().hide('slow');
     $(".btn-dis").css("display", "block")
    }
 } 

demo

答案 1 :(得分:1)

您的代码不错,但很简单,当您单击显示按钮然后显示目标元素时,它又被隐藏了,因为您的按钮父元素触发了单击事件,您在其中进行隐藏。您必须通过带有 event id 的显示按钮,然后目标函数才能使用preventDefaultstopPropagation,您可以了解更多{{3} }

 function cc(event, id) {

     event.preventDefault();
     event.stopPropagation();

     $('#row' + id).siblings().hide('slow');
     $(".btn-dis").css("display", "block")

 }

 function clickInline(event, id) {
     event.preventDefault();
     event.stopPropagation();

     $('#row' + id).siblings('.row').css('display', 'flex');
     $(".btn-dis").css("display", "none")

 }

 function Expandcollapse(event, id) {

 }
.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.row>[class*='col-'] {
    display: flex;
    flex-direction: column;
}

.DC {
    border: 1px solid #bf7708;
    padding: 15px;
    margin: 4px;
    color: #575757;
    background-color: #e88d00;
    border-radius: 8px;
    width: 120px;
}

.table-hed {
    border: 1px solid #008cf3;
    background-color: #008cf3;
    color: #fff;
    padding: 10px;
    width: 147px
}

.bord-lin {
    border: 1px solid black;
}

.h-styl {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    text-align: center;
}

.teams {
    border-top: 1px solid #060606;
    padding: 10px;
    text-align: center;
    min-height: 180px;
    width: 150px
}

a {
    color: #fff;
    text-decoration: none;
}

.btn-dis {
    display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
    <button onclick="cc(event,2)">dddd</button>

    <div class="col-md-9">

        <div class="row">
            <div class="bread">
                <div id="bc1" class="btn-group btn-breadcrumb">
                    <a href="http://localhost/manage/manage/" class="btn btn-default">
                        <i class="fa fa-home"></i></a>
                    <a href="" class="btn btn-default">
                        <div>PI board</div>
                    </a>

                </div>
            </div>
            <div class="row">
                <div class="reg-form">
                    <div class="bulk">
                        <div class="col-md-4">
                            <h3 style="padding-left:1.2%">PI board</h3>
                        </div>
                        <div class="col-md-6" style="
                                 margin-left: -13%;
                                 margin-top: 2%;
                                 ">

                        </div>
                        <div class="col-md-2   enq-btn"><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-envelope"></i>new features</a></div>

                        <div class="clearfix"></div>
                    </div>
                    <div class="form clearfix">

                        <form name="registration1_form" id="registration1_form" method="POST" action="http://localhost/manage/products/deleteaboutsusall" enctype="multipart/form-data">

                            <div>

                                <div class="container" style="padding-bottom:70px">

                                    <div class="row ">
                                        <div class="col-sm-3 table-hed">Tasks
                                        </div>
                                        <div class="col-sm-9">
                                            <div class="row">
                                                <div class="col-sm-2 table-hed">Teams
                                                </div>

                                                <div class="col-sm-5 table-hed">
                                                    <a href="http://localhost/manage/scrum/TeamscrumBorad/2" /> sprint2 </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <div class="col-sm-3 bord-lin formContainerBoxT1">
                                            <div class="row ">
                                                <div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC" data-story_id="7" data-team-id="0" data-sprint-id="0">
                                                    <div class="col-sm-12 h-styl">
                                                        <b class="" id="content-7">asas</b>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <button type="button" id="pop-7" onClick="popfeatureEdit(7)" class="btn btn-primary btn-xs"><span class="fa fa-edit"></span> </button>
                                                        <p class="blog-post-bottom pull-right">
                                                            <a class="delete btn btn-primary btn-xs" href="http://localhost/manage/scrum/deletefeature/7_1" style="float:right"> <span class="fa fa-trash"></span> </a>
                                                        </p>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-sm-9">
                                            <div class="row" id="row1" onclick="cc(event,1)">

                                                <div class="col-md-2 teams bord-lin" id="team1">
                                                    <div style="height:140px">
                                                        Malabar
                                                    </div>
                                                    <button type="button" class="btn btn-primary btn-xs btn-dis" onclick="clickInline(event,1)">Show
                                                    </button>
                                                </div>
                                                <div id="teamz1" class="col-md-5 teams bord-lin formContainerBoxT1" data-team-id="1" data-sprint-id="2">
                                                    <div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC ui-draggable ui-draggable-handle" data-story_id="7" data-team-id="0" data-sprint-id="0">
                                                        <div class="col-sm-12 h-styl">
                                                            <b class="" id="content-7">asas</b>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <button type="button" id="pop-7" onclick="popfeatureEdit(7)" class="btn btn-primary btn-xs"><span class="fa fa-edit"></span> </button>
                                                            <p class="blog-post-bottom pull-right">
                                                                <a class="delete btn btn-primary btn-xs" href="http://localhost/manage/scrum/deletefeature/7_1" style="float:right"> <span class="fa fa-trash"></span> </a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="row" id="row2" onclick="cc(event,2)">

                                                <div class="col-md-2 teams bord-lin" id="team2" onclick="Expandcollapse(2)">
                                                    <div style="height:140px">
                                                        Pazhassi
                                                    </div>
                                                    <button type="button" id="mybutton" class="btn btn-primary btn-xs btn-dis" onclick="clickInline(event,2)">Show
                                                    </button>
                                                </div>
                                                <div id="teamz2" class="col-md-5 teams bord-lin formContainerBoxT1" data-team-id="2" data-sprint-id="2">
                                                    <div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC ui-draggable ui-draggable-handle" data-story_id="6" data-team-id="2" data-sprint-id="2">
                                                        <div class="col-sm-12 h-styl">
                                                            <b class="" id="content-6">zxz</b>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <button type="button" class="btn btn-primary btn-xs" id="pop-6" onClick="popfeatureEdit(6)"><span class="fa fa-edit"></span> </button>
                                                            <button type="button" class="btn btn-primary btn-xs pull-right"><span class="fa fa-trash"></span> </button>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC ui-draggable ui-draggable-handle" data-story_id="8" data-team-id="2" data-sprint-id="2">
                                                        <div class="col-sm-12 h-styl">
                                                            <b class="" id="content-8">shanua</b>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <button type="button" class="btn btn-primary btn-xs" id="pop-8" onClick="popfeatureEdit(8)"><span class="fa fa-edit"></span> </button>
                                                            <button type="button" class="btn btn-primary btn-xs pull-right"><span class="fa fa-trash"></span> </button>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                            <div class="row" id="row3" onclick="cc(event,3)">

                                                <div class="col-md-2 teams bord-lin" id="team3" onclick="Expandcollapse(3)">
                                                    <div style="height:140px">
                                                        Travancore
                                                    </div>
                                                    <button type="button" id="show" class="btn btn-primary btn-xs btn-dis" onclick="clickInline(event,3)">Show
                                                    </button>e </div>
                                                <div id="teamz3" class="col-md-5 teams bord-lin formContainerBoxT1" data-team-id="3" data-sprint-id="2">
                                                    <div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC ui-draggable ui-draggable-handle" data-story_id="11" data-team-id="3" data-sprint-id="2">
                                                        <div class="col-sm-12 h-styl">
                                                            <b class="" id="content-11">shanu testing</b>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <button type="button" class="btn btn-primary btn-xs" id="pop-11" onClick="popfeatureEdit(11)"><span class="fa fa-edit"></span> </button>
                                                            <button type="button" class="btn btn-primary btn-xs pull-right"><span class="fa fa-trash"></span> </button>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>

-谢谢-