。點擊只的.css

Question

我試圖做一個自定義的滑塊工作一次。

我想要什麼： 每次我點擊「.c-button」我想讓「.belt」類轉換-290px。

發生什麼事： 的「.belt」只轉換的第一次點擊和每次點擊之後什麼都不做。幫幫我？

$(".c-button").click(function() { 
    $(".belt").css({"transform":"translateX(-290px)"}); 
    }); 

Answer 1

隨着Draco18s的提及，您正在將元素的翻譯相對於其原始位置進行特定量的轉換。每次點擊一個按鈕時，翻譯設置爲相同的值。你需要增量的translateX值，來代替。

一種方法是將讀出的電流值和增加它作爲shown by Draco18s。
另一種方法是將值存儲在變量中，作爲shown by Miljan Puzović。

---

的另一種方法是使用CSS left而非transform。您可以更輕鬆地增加的left與addition assignment（+=）運營商的價值，而不存儲或分析當前值。

$(".c-button").click(function() { 
 
    $(".belt").css({ 
 
    "left": "+=20" 
 
    }); 
 
});

.belt { 
 
    position: relative; 
 
    background-color: #F00; 
 
    width: 1em; 
 
    height: 1em; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="belt"></div> 
 
<button class="c-button">click</button> 
 
<button class="c-button">click</button> 
 
<button class="c-button">click</button>

Answer 2

這不是CSS變換屬性的工作方式。這將當前變換設置爲正好位於元素正常位置的290個像素。

爲了增加翻譯量不斷增加，您需要讀取當前值，然後將其解析爲一個整數，然後添加（好，減去）290個像素，然後執行基於那個價值。

$(".belt").click(function(){ 
    var posX = parseInt($(".belt").css('transform').split(/,/)[4]); 
    posX -= 290; 
    console.log(posX); 
    $(".belt").css('transform','translatex('+posX+'px)'); 
});