如何使用Jqery在單擊按鈕時將css自定義屬性的值更改為1？-有解無憂

如何使用 Jqery 在單擊按鈕時將 css 自定義屬性的值更改為 1？我想在單擊下一個按鈕時將值更改為 1，我嘗試使用此 x 變數，然后在單擊下一個按鈕時添加一個變數，但它不起作用。如果我希望在單擊下一個按鈕時 x 變數增加 1，我應該怎么做才能使代碼正常作業。

$('.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>

uj5u.com熱心網友回復：

你有兩個問題：

每次單擊Next按鈕，您的x變數都會重新宣告為 0。您應該在回呼函式之外定義它。
$(":root")[0].style.setProperty("--slider-index", x );將--slider-index屬性設定為 0，然后將值增加 1。在分配給屬性之前x，您應該使用 x將值增加1。x--slider-index

uj5u.com熱心網友回復：

用于CSSStyleDeclaration.getPropertyValue()獲取當前--slider-index值，分配給變數，例如x，并預先增加它的值，如： x。

例如：

$('.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>

如果您不需要再次使用該--slider-index代碼塊中的值，則可以跳過分配給變數的步驟，只需在當前--slider-index值上加一：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/491824.html

標籤：javascript html jQuery css

上一篇：從java類中的建構式呼叫的模擬靜態方法

下一篇：Jenkinsapi4jenkins下載最后一個構建作業控制臺輸出