मेरे पास एक बटन है और मैं इसके लेबल को 1 से 2 में बदलना चाहता हूं, ताकि 1 स्लाइड हो जाए और इस बीच 2 इसे बदल दे। मैंने स्निपेट में यही कोशिश की है। हालांकि, अंत में कुछ भी नहीं दिखाया गया है। कृपया ध्यान दें कि 1 और 2 उदाहरण हैं, सामान्य तौर पर इसे किसी ईवेंट पर पुराने मान को नए मान से बदल देना चाहिए।

$('#slideIndexBox').slideDown().promise().done(function() {
  $(this).text('2');
  $(this).slideUp();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="indicator" class="btn mb-2 btn-block btn-outline-info ">
  <!--<span id="slideIndicator"></span>-->
  <span id="slideIndexBox">1</span>
</button>
3
Ahmad 2 अक्टूबर 2019, 16:55

1 उत्तर

आप ऐसा कर सकते हैं, लेकिन यह पिछले वाले के बाद वापस ऊपर की ओर स्क्रॉल करेगा। इस मामले में नीचे मैंने शुरुआत से ही सभी आइटम जोड़े हैं क्योंकि यह आपके बटन को एक सटीक चौड़ाई देगा। आप जैसे चाहें वैसे ही आइटम जोड़ सकते हैं लेकिन उस स्थिति में बटन चौड़ाई बदल देगा।

हालांकि इस समाधान के लिए यह आवश्यक होगा कि आपका बटन टेक्स्ट काम करने के लिए एक पंक्ति पर हो। सीएसएस में बटन की ऊंचाई भी मनमानी है।

$('#indicator').on('click', function () {
  var $container = $('div', this),
    index = ($container.data('i') || 0) + 1;
  if (index + 1 > $('span', $container).length) {
    $container.data('i', 0);
    $container.css('transform', 'translateY(0)');
  } else {
    $container.data('i', index);
    $container.css('transform', 'translateY(' + -$('span', this).height() * index + 'px)');
  }
});
.btn { height: 1.5em; overflow: hidden; display: inline-block; }
.btn span {
  display: block;
}
.btn div {
  transform: translateY(0);
  transition: transform 0.5s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="indicator" class="btn mb-2 btn-block btn-outline-info ">
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>Moar content</span>
  </div>
</button>

मुझे लगता है कि आपको मूल्य को प्रतिस्थापित करने की आवश्यकता है, हालांकि यह वह नहीं हो सकता है जिसे आप ढूंढ रहे हैं।

0
russinkungen 2 अक्टूबर 2019, 15:07