Augmenter la valeur CSS au lieu de diminuer avec jquery

Question

J'ai une page que j'ai besoin de convertir en RTL.
L'onglet actif & position de la flèche de tabulation ne correspond pas. Je dois changer la position de la flèche d'onglet de la touche 1 à la touche 2 et vice versa.
je l'ai déjà changé une valeur js mais en vain

HTML:

<div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 

       <div class="main-search-container"> 

        <form class="main-search-form"> 

         <div class="search-type"> 
          <label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TEXT</label> 
          <label><input name="tab" type="radio">TEXT</label> 
          <label><input name="tab" type="radio">TEXT</label> 
          <div class="search-type-arrow"></div> 
         </div> 

         <div class="main-search-box"> 

          <div class="main-search-input larger-input"> 
          </div> 

         </div> 
        </form> 



      </div> 
     </div> 
    </div> 

</div> 
</div> 

CSS:

body { 
    direction:rtl; 
    color: #707070; 
    background-color: #cccccc; 
} 
.parallax { 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    position: relative; 
    z-index: 99; 
} 
.parallax-overlay { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 101; 
    background-color: #333; 
    opacity: 0.4; 
} 

.parallax-content { 
    position: relative; 
    z-index: 999; 
    padding: 105px 0; 
} 

.main-search-container { 
    transform: translate3d(0,-12px,0); 
} 

.main-search-form { 
    width: 660px; 
    display: block; 
    margin: 0 auto; 
    position: relative; 
    margin-top: 35px; 
} 

.search-type { 
    display: inline-block; 
    padding-bottom: 35px; 
    position: relative; 
} 

.search-type input[type="radio"] { display: none; } 

.search-type label { 
    background-color: #fff; 
    color: #333; 
    cursor: pointer; 
    display:inline-block; 
    text-align: center; 
    padding: 9px 18px; 
    margin: 0 0 0 15px; 
    float: right; 
    transition: all 0.2s; 
    border-radius: 3px; 
} 

.search-type label:hover, 
.search-type label.active { 
    background-color: #66676b; 
    color: #fff; 
} 
.search-type-arrow { 
    width: 0; 
    height: 0; 
    border-right: 15px solid transparent; 
    border-left: 15px solid transparent; 
    border-bottom: 15px solid #fff; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    transform: translate3d(-3px,0,0); 
} 

.main-search-box { 
    background-color: #fff; 
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12); 
    padding: 30px; 
    padding-bottom: 20px; 
    margin-top: -9px; 
    border-radius: 3px; 
} 

.main-search-box.no-shadow { 
    box-shadow: none; 
    padding: 0; 
    margin: 0; 
} 
.search-container .main-search-input input { 
    font-weight: 500; 
    font-size: 17px; 
    height: 57px !important; 
    float: right; 
    box-sizing: border-box; 
    border: none; 
    float: right; 
    height: auto; 
} 
.search-container .main-search-input button.button { 
    width: initial; 
    min-width: 100px; 
    max-width: 100px; 
    margin: 0; 
    font-size: 18px; 
    position: relative; 
    margin-right: 20px; 
    flex: 0 auto; 
    height: 57px; 
} 
.search-container .main-search-input button.button i { 
    position: relative; 
    right: 2px; 
} 

JS:

(function($){ 
"use strict"; 

$(document).ready(function(){ 

function searchTypeButtons() { 

    // Radio attr reset 
    $('.search-type label.active input[type="radio"]').prop('checked',true); 

    // Positioning indicator arrow 
    var buttonWidth = $('.search-type label.active').width(); 
    var arrowDist = $('.search-type label.active').position().left; 
    $('.search-type-arrow').css('right', arrowDist + (buttonWidth/2)); 

    $('.search-type label').on('change', function() { 
     $('.search-type input[type="radio"]').parent('label').removeClass('active'); 
     $('.search-type input[type="radio"]:checked').parent('label').addClass('active'); 

     // Positioning indicator arrow 
     var buttonWidth = $('.search-type label.active').width(); 
     var arrowDist = $('.search-type label.active').position().left; 

     $('.search-type-arrow').css({ 
      'right': arrowDist + (buttonWidth/2), 
      'transition':'right 0.4s cubic-bezier(.87,-.41,.19,1.44)' 
     }); 
    }); 

} 

// Init 
if ($(".main-search-form").length){ 
    searchTypeButtons(); 
    $(window).on('load resize', function() { searchTypeButtons(); }); 
} 



// ------------------ End Document ------------------ // 
}); 

})(this.jQuery); 

• J'utilise bootstrap, bootstrap rtl retourné & jquery 2.2.0 comme ressources externes.

est ici l'extrait:
https://jsfiddle.net/s3hy37nd/5/

Quelqu'un peut-il aider?

Answer 1

tant d'erreurs ... Je ne peux dire que j'ai essayé de les commenter tous à l'intérieur du code pour ... ouais il est tout ce qu'il ya:

"use strict"; 
 

 
jQuery(function($) { // DOM ready and $ alias secured 
 

 
    // Radio attr reset (on DOM ready... makes sense?) 
 
    $('.search-type label.active input[type="radio"]').prop('checked', true); 
 

 
    function repositionArrow() { // Use a meaningful fn name 
 
    // Positioning indicator arrow 
 
    // Width? No. You need .outerWidth! you have paddings!! 
 
    var buttonWidth = $('.search-type label.active').outerWidth(); 
 
    // Again use meaningful names 
 
    // If you do console.log($('.search-type label.active').position()); 
 
    // you'll see no `.right` property. So yeah, use .left 
 
    var posLeft = $('.search-type label.active').position().left; 
 

 
    $('.search-type-arrow').css({ 
 
     left: posLeft + (buttonWidth/2) 
 
     // No need for transition here - move it to Stylesheet instead 
 
    }); 
 
    } 
 

 
    // Init 
 
    if ($(".main-search-form").length) { 
 
    // You might want this too inside the "if" 
 
    $('.search-type label').on('change', function() { 
 
     $('.search-type input[type="radio"]').parent('label').removeClass('active'); 
 
     $('.search-type input[type="radio"]:checked').parent('label').addClass('active'); 
 
     repositionArrow(); // Now you have such function 
 
    }); 
 
    repositionArrow(); 
 
    $(window).on('load resize', repositionArrow); 
 
    } 
 

 
});

body { 
 
    direction: rtl; 
 
    color: #707070; 
 
    background-color: #cccccc; 
 
} 
 

 
.parallax { 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    position: relative; 
 
    z-index: 99; 
 
} 
 

 
.parallax-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 101; 
 
    background-color: #333; 
 
    opacity: 0.4; 
 
} 
 

 
.parallax-content { 
 
    position: relative; 
 
    z-index: 999; 
 
    padding: 105px 0; 
 
} 
 

 
.main-search-container { 
 
    transform: translate3d(0, -12px, 0); 
 
} 
 

 
.main-search-form { 
 
    width: 660px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    margin-top: 35px; 
 
} 
 

 
.search-type { 
 
    display: inline-block; 
 
    padding-bottom: 35px; 
 
    position: relative; 
 
} 
 

 
.search-type input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.search-type label { 
 
    position: relative; 
 
    /* YOU NEED SOME POSITION! */ 
 
    background-color: #fff; 
 
    color: #333; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 9px 18px; 
 
    margin: 0 0 0 15px; 
 
    /*float: right;    WHY? you use rtl already */ 
 
    transition: all 0.2s; 
 
    border-radius: 3px; 
 
} 
 

 
.search-type label:hover, 
 
.search-type label.active { 
 
    background-color: #66676b; 
 
    color: #fff; 
 
} 
 

 
.search-type-arrow { 
 
    width: 0; 
 
    height: 0; 
 
    border-right: 15px solid transparent; 
 
    border-left: 15px solid transparent; 
 
    border-bottom: 15px solid #fff; 
 
    position: absolute; 
 
    bottom: 0; 
 
    /*right: 0;   ...Nope. See JS, we need left */ 
 
    left: calc(100% - 30px); 
 
    /* calc to the rescue */ 
 
    /*transform: translate3d(-3px,0,0);  but why */ 
 
    transition: left 0.4s cubic-bezier(.87, -.41, .19, 1.44); 
 
    /* Moved from JS */ 
 
} 
 

 
.main-search-box { 
 
    background-color: #fff; 
 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12); 
 
    padding: 30px; 
 
    padding-bottom: 20px; 
 
    margin-top: -9px; 
 
    border-radius: 3px; 
 
}

<div class="parallax-content"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 

 
     <div class="main-search-container"> 
 
      <form class="main-search-form"> 
 
      <div class="search-type"> 
 
       <label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TAB 1</label> 
 
       <label><input name="tab" type="radio">TAB 2</label> 
 
       <label><input name="tab" type="radio">TAB 3</label> 
 
       <div class="search-type-arrow"></div> 
 
      </div> 
 

 
      <div class="main-search-box"> 
 
       <div class="main-search-input larger-input"> 
 
       </div> 
 
      </div> 
 
      </form> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Updated jsFiddle