Home > Software engineering >  How can i change the value of css custom property by 1 on button click using Jqery?
How can i change the value of css custom property by 1 on button click using Jqery?

Time：06-16

How can i change the value of css custom property by 1 on button click using Jqery? I want to change the value by 1 when the next button is clicked, i tried to use this x variable and then add one to it whenever the next button is clicked but it didn't work. What should i do to get the code working, if i want the x variable to increase by 1 when i click on the next button. 

$('.carouselnav.next').click(function(){
  var x = 0;
 $(":root")[0].style.setProperty("--slider-index", x  );
})
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
:root{
 --handle-size:3rem;
  --img-gap:.25rem;
  --slider-index:1;
  --items-per-screen:5;
}
body{
  background:#f3f3f3;
}
.container{
  width:100%;
 
  position:relative;
}
.carouselcontainer{
   max-width:1360px;
  margin:50px auto;
  background:#f1f1f1;
  position:relative;
  overflow:hidden;
}
.caroufredsel_wrapper{
  width:100%;
}
.shopWindow{
  display:flex;
  justify-content:space-between;
   transform: translateX(calc(var(--slider-index) * -100%));
  transition:transform 0.9s linear;
  
}
.shopWindow .grid-unit {
    flex-shrink: 0;
    width: 144px;
    /*width: calc(100% / 5);*/
    width:calc(100% / var( --items-per-screen));
  max-width:100%;
    padding-right: 5px !important;
    margin-right: 0 !important;
    height: 460px !important;
}
.shopWindow .thumb{
  position: relative;
    overflow: hidden;
    padding: 45px 10px;
    background: #fff;
}
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {
  display:block;
  margin: 0 auto;
}
.shopWindow .item .itemInfo {
    padding: 20px 0;
    background: #fafafa;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    font-weight: 500;
    text-align: center;
}
.shopWindow .item .trademark {
    margin-bottom: 4px;
}

.shopWindow .item .title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 9px;
}
.shopWindow .item .trademark a {
    line-height: 16px;
    font-size: 14px;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
}
.shopWindow .item .title a {
    line-height: 19px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    font-weight: 400;
}
.shopWindow .item .campaignContainer {
    display: flex;
    margin-bottom: 10px;
    height: 30px;
}
.shopWindow .item .campaignContainer .priceContainer {
    display: flex;
    width: 100%;
    font-family: 'Inter',sans-serif;
    justify-content: center;
}
.shopWindow .item .campaignContainer .priceContainer .price, .shopWindow .item .campaignContainer .priceContainer .discount {
    color: #303030;
    font-weight: 700;
    display: inline-block;
    font-size: 18px;
    line-height: 27px;
}
.carouselcontainer .carouselnav {
    background-color: transparent !important;
    background-image: none !important;
    position: absolute;
    background-color: #ececec;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.8;
    top: 0;
    height: 100%;
    width: 30px;
}
div.carouselcontainer.horizontal a.carouselnav.prev {
    left: 0;
   
}
div.carouselcontainer.horizontal a.carouselnav.next {
    right: 4px;
   
}
.carouselcontainer.horizontal .carouselnav.next:before {
    content: '>';
}
.carouselcontainer.horizontal .carouselnav.prev:before {
    content: '<';
}

.carouselcontainer a.carouselnav {
    visibility: visible !important;
}
.carouselcontainer .carouselnav:before {
    font-family: FontAwesome;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    opacity: 0.5;
}
.carouselcontainer .carouselnav:hover {
    background-color: #e0e0e0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
 <div >
   <div >
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </img>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </img>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
  </div>
     </div>
  <a  href="#">
     
   </a>
   <a  href="#">
     
   </a>
</div>
  </div>

CodePudding user response：

Use CSSStyleDeclaration.getPropertyValue() to get the current --slider-index value, assign to a variable, such as x, and pre-increment it's value, as in: x.

For example:

$('.carouselnav.next').click(function(){
  let x = $(":root")[0].style.getPropertyValue("--slider-index");
  $(":root")[0].style.setProperty("--slider-index",   x);
  console.log(x);
})
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
:root{
 --handle-size:3rem;
  --img-gap:.25rem;
  --slider-index:0;
  --items-per-screen:5;
}
body{
  background:#f3f3f3;
}
.container{
  width:100%;
 
  position:relative;
}
.carouselcontainer{
   max-width:1360px;
  margin:50px auto;
  background:#f1f1f1;
  position:relative;
  overflow:hidden;
}
.caroufredsel_wrapper{
  width:100%;
}
.shopWindow{
  display:flex;
  justify-content:space-between;
   transform: translateX(calc(var(--slider-index) * -100%));
  transition:transform 0.9s linear;
  
}
.shopWindow .grid-unit {
    flex-shrink: 0;
    width: 144px;
    /*width: calc(100% / 5);*/
    width:calc(100% / var( --items-per-screen));
  max-width:100%;
    padding-right: 5px !important;
    margin-right: 0 !important;
    height: 460px !important;
}
.shopWindow .thumb{
  position: relative;
    overflow: hidden;
    padding: 45px 10px;
    background: #fff;
}
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {
  display:block;
  margin: 0 auto;
}
.shopWindow .item .itemInfo {
    padding: 20px 0;
    background: #fafafa;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    font-weight: 500;
    text-align: center;
}
.shopWindow .item .trademark {
    margin-bottom: 4px;
}

.shopWindow .item .title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 9px;
}
.shopWindow .item .trademark a {
    line-height: 16px;
    font-size: 14px;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
}
.shopWindow .item .title a {
    line-height: 19px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    font-weight: 400;
}
.shopWindow .item .campaignContainer {
    display: flex;
    margin-bottom: 10px;
    height: 30px;
}
.shopWindow .item .campaignContainer .priceContainer {
    display: flex;
    width: 100%;
    font-family: 'Inter',sans-serif;
    justify-content: center;
}
.shopWindow .item .campaignContainer .priceContainer .price, .shopWindow .item .campaignContainer .priceContainer .discount {
    color: #303030;
    font-weight: 700;
    display: inline-block;
    font-size: 18px;
    line-height: 27px;
}
.carouselcontainer .carouselnav {
    background-color: transparent !important;
    background-image: none !important;
    position: absolute;
    background-color: #ececec;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.8;
    top: 0;
    height: 100%;
    width: 30px;
}
div.carouselcontainer.horizontal a.carouselnav.prev {
    left: 0;
   
}
div.carouselcontainer.horizontal a.carouselnav.next {
    right: 4px;
   
}
.carouselcontainer.horizontal .carouselnav.next:before {
    content: '>';
}
.carouselcontainer.horizontal .carouselnav.prev:before {
    content: '<';
}

.carouselcontainer a.carouselnav {
    visibility: visible !important;
}
.carouselcontainer .carouselnav:before {
    font-family: FontAwesome;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    opacity: 0.5;
}
.carouselcontainer .carouselnav:hover {
    background-color: #e0e0e0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
 <div >
   <div >
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </img>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </img>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
<div >
  <div >
    
    <div >
      <div >
        <div ></div>
        <a href="" ></a>
        <a href="" >
          <img  src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
        </a>
      </div>
      <div >
        <div >
          <a href="">KTM</a>
        </div>
        <div >
          <a href="">Wild Cross 24</a>
        </div>
        <div >
          <div >
            <span >6490</span>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>
  </div>
     </div>
  <a  href="#">
     
   </a>
   <a  href="#">
     
   </a>
</div>
  </div>

If you don't need to use the --slider-index value in that code block again, you can skip assigning to a variable and just add one to the current --slider-index value:

$('.carouselnav.next').click(function(){
  $(":root")[0].style.setProperty(
    "--slider-index", 
    1   $(":root")[0].style.getPropertyValue("--slider-index")
  );
})

CodePudding user response：

You have two problems:

  • Everytime click Next button, your x variable is re-declared as 0. You should define it outside the callback function.
  • $(":root")[0].style.setProperty("--slider-index", x ); will set --slider-index property by 0 and then increase x value by 1. You should use x to increase x value by 1 before assigning to --slider-index property.

Page link：https//www.codepudding.com/Softwareengineering/444090.html

Prev:How can I move the 'X' button to the end of the right side(inline with the left side of te
Next:Only call method once when binding attribute in Angular
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding