如何使用 jQuery 在单击按钮时将 CSS 自定义属性的值更改为 1？

Question

How can I change the value of css custom property by 1 on button click using jQuery?

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 class="container"> <div class="carouselcontainer horizontal"> <div class="caroufredsel_wrapper"> <div class="shopWindow"> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </img> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </img> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> </div> </div> <a class="carouselnav next" href="#"> </a> <a class="carouselnav prev" href="#"> </a> </div> </div>

Answer 1

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 class="container"> <div class="carouselcontainer horizontal"> <div class="caroufredsel_wrapper"> <div class="shopWindow"> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </img> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </img> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> <div class="grid-unit"> <div class="grid-unit-inner"> <div class="item"> <div class="thumb"> <div class="badges"></div> <a href="" class="addfavourite"></a> <a href="" > <img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""> </a> </div> <div class="itemInfo"> <div class="trademark"> <a href="">KTM</a> </div> <div class="title"> <a href="">Wild Cross 24</a> </div> <div class="campaignContainer"> <div class="priceContainer"> <span class="price">6490</span> </div> </div> <div class="bottom-container"></div> </div> </div> </div> </div> </div> </div> <a class="carouselnav next" href="#"> </a> <a class="carouselnav prev" 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")
  );
})

Answer 2

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.