वयस्कों और बच्चों के लिए दो काउंटर हैं। और मैं नीचे जैसा कुछ बनाता हूं।

$(document).ready(function(){
    var n = 0;
    var adultCounter = ".counter-adult";
    var childCounter = ".counter-child";

    $(adultCounter).val(n);
    $(childCounter).val(n);

    $(".plus-adult").on("click", function(){
        $(adultCounter).val(++n);
    })
    $(".minus-adult").on("click", function(){
        if (n > 0) {
            $(adultCounter).val(--n);
        }
    })



    $(".plus-child").on("click", function(){
        $(childCounter).val(++n);
    })
    $(".minus-child").on("click", function(){
        if (n > 0) {
            $(childCounter).val(--n);
        }
    })

    if ($(childCounter).val(n) > 0) {$(".minus-child").removeClass("de-active-counter")}
    
});
.person-bar-wrap .person-count {
    position: relative;
    width: 300px;
    display: flex;
    align-items: center;
    border-left: 1px solid #dcdde1;
    cursor: pointer;
}
.person-bar-wrap .person-count .hidden-filter {
    z-index: 999;
    position: absolute;
    width: 301px;
    top: 75px;
    border: 1px solid #dcdde1;
    left: -1px;
    background-color: #fff;
    cursor: default;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-header {
    padding: 20px 20px 20px 20px;
}
person-bar-wrap .person-count .hidden-filter
.hidden-filter-context {
    display: flex;
    border-top: 1px solid #dcdde1;
    align-items: center;
    padding: 10px 20px;

}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context p.person-t {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .minus, .counter, .plus {
    display: flex;
    justify-content: center;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context input.counter {
    width: 24px;
    margin: 0 10px;
    border-width:0px;
    border:none;
    box-shadow: none;
    padding-left: 5px;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .minus, .plus {
    background-color: #995d64;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    align-items: center;
    text-align: center !important;
    margin: auto;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .de-active-counter {
    background-color: #dcdde1 !important;    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="person-bar-wrap">
  <div class="person-count">
      <div class="hidden-filter">
          <div class="hidden-filter-context">
              <p class="person-t">Adult</p>
              <span class="minus-adult minus">-</span>
              <input class="counter counter-adult" type="" name="" value="">
              <span class="plus-adult plus">+</span>
          </div>
          <div class="hidden-filter-context">
              <p class="person-t">Child</p>
              <span class="minus-child minus de-active-counter">-</span>
              <input class="counter counter-child" type="" name="" value="">
              <span class="plus-child plus">+</span>
          </div>
      </div>
  </div>
</div>

दोनों काउंटर चल रहे हैं। माइनस और प्लस, लेकिन मैं कोशिश कर रहा हूं addClass("de-active-counter") अगर काउंटर == 0 और क्लास को हटा दें अगर > 0 लेकिन उस हिस्से पर काफी काम नहीं हुआ है। removeClass() काम नहीं कर रहा है। मैंने सोचा कि यह समस्या है कि मैं काउंटर फ़ंक्शन कैसे बनाऊं ... यदि ऐसा है, तो मुझे इसे कैसे बनाना चाहिए?

0
yvl 29 अक्टूबर 2019, 04:34

1 उत्तर

सबसे बढ़िया उत्तर

> 0 की जांच करते समय आपको मान को पूर्णांक में बदलना होगा।

$(document).ready(function() {
  var n = 0;
  var adultCounter = ".counter-adult";
  var childCounter = ".counter-child";

  $(adultCounter).val(n);
  $(childCounter).val(n);

  $(".plus-adult").on("click", function() {
    $(adultCounter).val(++n);
    if (parseInt($(adultCounter).val()) > 0) {
      $(".minus-adult").removeClass("de-active-counter")
    }
  })
  $(".minus-adult").on("click", function() {
    if (n > 0) {
      $(adultCounter).val(--n);
    }
    if (parseInt($(adultCounter).val()) == 0) {
      $(".minus-adult").addClass("de-active-counter")
    } else {
      $(".minus-adult").removeClass("de-active-counter")
    }
  })



  $(".plus-child").on("click", function() {
    $(childCounter).val(++n);
    if (parseInt($(childCounter).val()) > 0) {
      $(".minus-child").removeClass("de-active-counter")
    }
  })
  $(".minus-child").on("click", function() {
    if (n > 0) {
      $(childCounter).val(--n);
    }
    if (parseInt($(childCounter).val()) == 0) {
      $(".minus-child").addClass("de-active-counter")
    } else {
      $(".minus-child").removeClass("de-active-counter")
    }
  })

});
.person-bar-wrap .person-count {
  position: relative;
  width: 300px;
  display: flex;
  align-items: center;
  border-left: 1px solid #dcdde1;
  cursor: pointer;
}

.person-bar-wrap .person-count .hidden-filter {
  z-index: 999;
  position: absolute;
  width: 301px;
  top: 75px;
  border: 1px solid #dcdde1;
  left: -1px;
  background-color: #fff;
  cursor: default;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-header {
  padding: 20px 20px 20px 20px;
}

person-bar-wrap .person-count .hidden-filter .hidden-filter-context {
  display: flex;
  border-top: 1px solid #dcdde1;
  align-items: center;
  padding: 10px 20px;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context p.person-t {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .minus,
.counter,
.plus {
  display: flex;
  justify-content: center;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context input.counter {
  width: 24px;
  margin: 0 10px;
  border-width: 0px;
  border: none;
  box-shadow: none;
  padding-left: 5px;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .minus,
.plus {
  background-color: #995d64;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  align-items: center;
  text-align: center !important;
  margin: auto;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .de-active-counter {
  background-color: #dcdde1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="person-bar-wrap">
  <div class="person-count">
    <div class="hidden-filter">
      <div class="hidden-filter-context">
        <p class="person-t">Adult</p>
        <span class="minus-adult minus de-active-counter">-</span>
        <input class="counter counter-adult" type="" name="" value="">
        <span class="plus-adult plus">+</span>
      </div>
      <div class="hidden-filter-context">
        <p class="person-t">Child</p>
        <span class="minus-child minus de-active-counter">-</span>
        <input class="counter counter-child" type="" name="" value="">
        <span class="plus-child plus">+</span>
      </div>
    </div>
  </div>
</div>
1
Nidhin Joseph 29 अक्टूबर 2019, 01:45