2017-05-20 5 views
0

私はその問題はわかりませんが、私の見積もりによると、それはis.soのように私が選択した場合、1からChildを選択して表示されますまたは、をChildから選択した場合、2が選択されているので、0を選択した後、もう一度、1または2を選択すると、親の選択が、どこに問題があるのか​​、または、 jqueryイベントの問題選択オプション

$(document).ready(function(){ 
 
\t $('[data-role="popover"]').popover(); 
 

 
    $(document).on("change",".cocuk-kisi-sayi",function(e){ 
 

 
     if($(this).val() == 0) { 
 
     $(".cocuk-yaslari-area").hide(); 
 
     }else if($(this).val()==1){ 
 
     $(".cocuk-yasi-text,.cocuk-yasi-1").show(); 
 
     $(".cocuk-yasi-2").hide(); 
 
     }else if($(this).val()==2){ 
 
     $(".cocuk-yasi-text,.cocuk-yasi-1,.cocuk-yasi-2").show(); 
 
     } 
 
     else{ 
 
     
 
     } 
 
    }); 
 

 
    $(".yetiskin-kisi-sayi, .cocuk-kisi-sayi").change(function() { 
 
     var val1 = parseInt($('.yetiskin-kisi-sayi').find(":selected").text()), 
 
     val2 = parseInt($('.cocuk-kisi-sayi').find(":selected").text()); 
 

 
    $(".yetiskin-value").text(val1); 
 
    $(".cocuk-value").text(val2); 
 

 
    $(".kisi-count").text(val1 + val2 + " Person"); 
 

 
    }); 
 
}); 
 

 
!function(t,e,o,n){"use strict";var r=t.fn.popover,i=function(e,o){return this.$el=t(e),this.options=this.getOptions(o),this.$wrapper=this.$el.parents(".popover-wrapper").eq(0),this.$body=this.$wrapper.find(".popover-body"),this.listenEvents(),this};i.DEFAULTS={trigger:"click"},i.prototype.getDefaults=function(){return i.DEFAULTS},i.prototype.getOptions=function(e){return e=t.extend({},this.getDefaults(),this.$el.data(),e)},i.prototype.listenEvents=function(e){var n=this,r=this.$el;t(o).click(function(e){if(this.$wrapper.hasClass("open")){var o=!t.contains(this.$wrapper[0],e.target)&&this.$wrapper[0]!==e.target;o&&this.close()}}.bind(this));var i=this.options.trigger;return"click"===i?r.on("click",function(t){t.preventDefault(),n.toggle()}):"hover"===i&&(r.on("mouseenter",function(t){t.preventDefault(),n.open()}),r.on("mouseleave",function(t){t.preventDefault(),n.close()}),r.on("click",function(t){t.preventDefault(),n.toggle()})),this.$wrapper.find('[data-toggle-role="close"]').on("click",function(t){t.preventDefault(),n.close()}),this},i.prototype.open=function(){return this.$wrapper&&this.$wrapper.addClass("open"),this},i.prototype.close=function(){return this.$wrapper&&this.$wrapper.removeClass("open"),this},i.prototype.toggle=function(){return this.$wrapper&&this.$wrapper.toggleClass("open"),this};var p=function(e){return this.each(function(){var o=t(this),n=o.data("gb.popover");n||(n=new i(this,e),o.data("gb.popover",n))})};t.fn.popover=p,t.fn.popover.Constructor=i,t.fn.popover.noConflict=function(){return t.fn.popover=r,this}}(jQuery,window,document);
body{ 
 
\t margin:100px; 
 
} 
 
.popover-modal:after,.popover-modal:before{display:inline-block;content:""}.popover-wrapper{position:relative}.popover-modal{-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-transition:all 240ms cubic-bezier(.34,1.61,.7,1);-o-transition:all 240ms cubic-bezier(.34,1.61,.7,1);transition:all 240ms cubic-bezier(.34,1.61,.7,1);-webkit-transform:scale(0);transform:scale(0);transform-origin:29px -10px;opacity:0;position:absolute;z-index:1000;width:300px;margin-top:8px;border-radius:4px;border:1px solid #aab2bd;background-color:#fff}.popover-wrapper.open .popover-modal{-webkit-transform:scale(1);transform:scale(1);opacity:1}.popover-wrapper.open .btn-dropdown{outline:0}.popover-modal:before{position:absolute;top:-16px;left:16px;border:8px solid transparent;border-bottom-color:#aab2bd}.popover-modal:after{position:absolute;top:-14px;left:17px;border:7px solid transparent;border-bottom-color:#fff}.popover-modal .popover-body{margin:0;padding:20px;max-height:300px;overflow:hidden;}.popover-modal .popover-body.popover-body-padded{padding:8px}.popover-modal .popover-header{padding:8px;line-height:19px;border-bottom:1px solid #aab2bd}.popover-modal .popover-header a{color:#434a54;text-decoration:none;line-height:19px}.popover-modal .popover-header a:hover{color:#000}.popover-modal .popover-header .popover-close-btn{float:right}.popover-wrapper.right .popover-modal{transform-origin:275px -10px;right:0}.popover-wrapper.right .popover-modal:before{left:auto;right:16px}.popover-wrapper.right .popover-modal:after{left:auto;right:17px} 
 

 
.kisi-sayisi-sec{ 
 
    background:#FFF; 
 
    color:#333; 
 
    width:100%; 
 
    height:47px; 
 
    padding:10px; 
 
\t \t border-radius:3px; 
 
\t \t border:1px solid #ccc; 
 
\t \t display:block; 
 
\t \t width:150px; 
 
    cursor:pointer; 
 
    @include clearfix(); 
 
    .rez-kisi{ 
 
     margin-right: 5px; 
 
    } 
 
    a{ 
 
     &:hover,&:focus{ 
 
      color:#878787; 
 
     } 
 
    } 
 
} 
 

 
.kisi-sayi-otel-sec{ 
 
    select{ 
 
     border:1px solid #e6e6e6; 
 
     height:37px; 
 
     line-height: 12px; 
 
     padding: 0 0 0 15px; 
 
     font-weight: 300; 
 
     font-size: 12px; 
 
    } 
 
} 
 
.cocuk-yaslari-area{ 
 
    select{ 
 
      width: 30%; 
 
    } 
 
} 
 
.cocuk-yasi-1,.cocuk-yasi-2,.cocuk-yasi-text{ 
 
    display: none; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
</head> 
 

 
<body> 
 
    <span class="popover-wrapper"> 
 
                <a href="#" data-role="popover" data-target="example-popover" class="kisi-sayisi-sec"><span class="kisi-count">Person</span></a> 
 
    <div class="popover-modal example-popover"> 
 
    <div class="popover-body"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr0"> 
 
      <p>Adult</p> 
 
      <select class="yetiskin-kisi-sayi"> 
 
                  <option value="1">1</option> 
 
                  <option value="2">2</option> 
 
                  <option value="3">3</option> 
 
                  <option value="4">4</option> 
 
                  <option value="5">5</option> 
 
                  <option value="6">6</option> 
 
                  </select> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pl5"> 
 
      <p>Child</p> 
 
      <select class="cocuk-kisi-sayi"> 
 
                  <option value="0">0</option> 
 
                  <option value="1">1</option> 
 
                  <option value="2">2</option> 
 
                  </select> 
 
      <input type="hidden" class="yetiskin-value"> 
 
      <input type="hidden" class="cocuk-value"> 
 
     </div> 
 
     </div> 
 
     <div class="row cocuk-yaslari-area"> 
 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
      <p class="cocuk-yasi-text">Çocuk Yaşları</p> 
 
     </div> 
 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
      <select class="cocuk-yasi-1"> 
 
                   <option value="0">--</option> 
 
                   <option value="1">1</option> 
 
                   <option value="2">2</option> 
 
                   <option value="3">3</option> 
 
                   <option value="4">4</option> 
 
                   <option value="5">5</option> 
 
                   <option value="6">6</option> 
 
                   <option value="7">7</option> 
 
                   <option value="8">8</option> 
 
                   <option value="9">9</option> 
 
                   <option value="10">10</option> 
 
                   <option value="11">11</option> 
 
                   <option value="12">12</option> 
 
                   <option value="13">13</option> 
 
                   <option value="14">14</option> 
 
                   <option value="15">15</option> 
 
                  </select> 
 
      <!-- cocuk yasi 1--> 
 

 
      <select class="cocuk-yasi-2"> 
 
                   <option value="0">--</option> 
 
                   <option value="1">1</option> 
 
                   <option value="2">2</option> 
 
                   <option value="3">3</option> 
 
                   <option value="4">4</option> 
 
                   <option value="5">5</option> 
 
                   <option value="6">6</option> 
 
                   <option value="7">7</option> 
 
                   <option value="8">8</option> 
 
                   <option value="9">9</option> 
 
                   <option value="10">10</option> 
 
                   <option value="11">11</option> 
 
                   <option value="12">12</option> 
 
                   <option value="13">13</option> 
 
                   <option value="14">14</option> 
 
                   <option value="15">15</option> 
 
                  </select> 
 
      <!-- çocuk yaşı 2--> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </span> 
 
</body> 
 

 
</html> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

はので、私のjsの関連部分はここ

$(document).ready(function(){ 
    $('[data-role="popover"]').popover(); 

    $(document).on("change",".cocuk-kisi-sayi",function(e){ 

     if($(this).val() == 0) { 
     $(".cocuk-yaslari-area").hide(); 
     }else if($(this).val()==1){ 
     $(".cocuk-yasi-text,.cocuk-yasi-1").show(); 
     $(".cocuk-yasi-2").hide(); 
     }else if($(this).val()==2){ 
     $(".cocuk-yasi-text,.cocuk-yasi-1,.cocuk-yasi-2").show(); 
     } 
     else{ 

     } 
    }); 

    $(".yetiskin-kisi-sayi, .cocuk-kisi-sayi").change(function() { 
     var val1 = parseInt($('.yetiskin-kisi-sayi').find(":selected").text()), 
     val2 = parseInt($('.cocuk-kisi-sayi').find(":selected").text()); 

    $(".yetiskin-value").text(val1); 
    $(".cocuk-value").text(val2); 

    $(".kisi-count").text(val1 + val2 + " Person"); 

    }); 
}); 

CodePen Demo

+0

あなたは、私は自分のコードに変更すべきか、あなたの他の二つのIFSに再び ' – Lixus

+0

を.cocuk-yaslari-area'を示していませんか? –

+0

答えに投稿してください。 – Lixus

答えて

1

の変更は、あなたのifsこれまでご.cocuk-kisi-sayi変更イベントインチ

if($(this).val() == 0) { 
    $(".cocuk-yaslari-area").hide(); 
}else if($(this).val()==1){ 
    $(".cocuk-yasi-text,.cocuk-yasi-1").show(); 
    $(".cocuk-yasi-2").hide(); 
    $(".cocuk-yaslari-area").show(); 
}else if($(this).val()==2){ 
    $(".cocuk-yasi-text,.cocuk-yasi-1,.cocuk-yasi-2").show(); 
    $(".cocuk-yaslari-area").show(); 
} 
+0

私は9分後にとても感謝します。 –

関連する問題