檢測第二次點擊按鈕

Question

我想更改按鈕上的CSS。第一次點擊，第二次。 我有這個，但它不起作用。千萬不要添加.clic-two

$(".prev-next-links li.no-clic").click(function() { 
    $(this).removeClass('no-clic'); 
    $(this).addClass('clic-one'); 
}); 

$(".prev-next-links li.clic-one").click(function() { 
    $(this).removeClass('clic-one'); 
    $(this).addClass('clic-two'); 
}); 

Answer 1

這樣做的另一種方法是使用公共類作爲選擇器。由於DOM是動態的，因此您必須使用在用戶交互後不會更改的CSS類。

$(".prev-next-links, .prev-next-links a").click(function() { 
 

 
    if ($(this).hasClass("no-clic")) { 
 
    
 
    $(this).removeClass('no-clic'); 
 
    $(this).addClass('clic-one'); 
 
    } else if ($(this).hasClass("clic-one")) { 
 
    $(this).removeClass('clic-one'); 
 
    $(this).addClass('clic-two'); 
 
    } 
 

 

 

 
});

.prev-next-links { 
 
    font-weight: bold; 
 
} 
 
.no-clic { 
 
    background-color: gray; 
 
} 
 
.clic-one { 
 
    background-color: aqua; 
 
} 
 
.clic-two { 
 
    background-color: lime; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="prev-next-links no-clic">First 
 
    </li> 
 
    <li class="prev-next-links"><a class="no-clic" href="#">Second</a> 
 
    </li> 
 

 
</ul>

Answer 2

您正在刪除/添加類，這意味着DOM上的屬性是動態的。而對於動態元素，你需要使用事件委託方法的工作：

$(".prev-next-links").on('click','li.no-clic',function() { 
    $(this).removeClass('no-clic'); 
    $(this).addClass('clic-one'); 
}); 
$(".prev-next-links").on('click','li.click-one',function() { 
    $(this).removeClass('clic-one'); 
    $(this).addClass('clic-two'); 
}); 

瞭解更多關於event delegation。

---

但我建議你設置一個標誌變量來檢查它是否被點擊第二次：

var clickedTime = 0; 
$(".prev-next-links li").click(function() { 
    clickedTime++; 
    $(this).toggleClass('click-one',clickedTime % 2 == 0); 
}); 

查找toggleClass文檔。

Answer 3

問題是因爲您在頁面加載後動態分配.clic-one類，但您在加載之前將點擊事件掛接到負載上的.click-one按鈕。

爲了解決這個問題，你應該使用委派事件處理程序：

$('.prev-next-links').on('click', '.no-clic', function() { 
    $(this).toggleClass('no-clic clic-one'); 
}).on('click', '.clic-one', function() { 
    $(this).toggleClass('clic-one clic-two'); 
}); 

另外要注意在使用addClass()/removeClass()分別向toggleClass()單呼。