我的jQuery click事件僅工作一次
[英]My jQuery click event only works once
問題描述
我有一組div（75px x 75px）。 我正在嘗試使用JQ，因此，當您單擊div時，它會變成500px x 500px，如果再次單擊它，它將返回到其原始大小。我可以將其放大，但是它不會響應任何大小我的最新嘗試：
$(document).ready(function () {
$(".option").on("click", function () {
if ($(this).width > ("100px")) {
$(this).css("width", "500px");
$(this).css("height", "500px");
$(this).css("background-color", "#FFB2B2");
$(this).css("background-color", "#FFB2B2");
}
});
$(".option").on("click", function () {
if ($(this).width < ("100px")) {
promt("dumb")
$(this).removeAttr("style")
$(this).css("height", "");
$(this).css("background-color", "");
$(this).css("background-color", "");
}
});
});
我也嘗試過
$(document).ready(function () {
$(".option").on("click", function () {
$(this).css("width", "500px");
$(this).css("height", "500px");
$(this).css("background-color", "#FFB2B2");
$(this).css("background-color", "#FFB2B2");
});
$(".option").on("click", function () {
$(this).off("click");
});
});
我想指出：我創建了一個dblclick事件。 就像一鍵放大一樣，dblclick縮小它。 它的作品，但不是非常用戶友好。
7 個解決方案
解決方案1
1 2017-02-01 01:04:28
您的問題出在您的if語句中，$。width是一個函數，您正在將其與字符串進行比較。
- 首先，您必須更正這些錯誤並通過將$（this）.width更改為$（this）.width（）來調用函數。 現在，此語句返回一個數字。
- 第二個問題是您正在將數字與字符串“ 100px”進行比較。 解決此更改，將“ 100px”更改為100。
- 您的第三個問題是，如果邏輯取反，則首先要檢查寬度是否大於100，然后將其設置為500x500（仍大於100），反轉此符號可以解決該問題
- 您的第四個問題是，您附加了兩個事件處理程序，它們將在另一個之后立即運行。 因此它將始終返回到原始狀態。 將第二條語句移到第一個事件中並將其設置為其他事件。
獎勵當您想一次更改多個CSS屬性時，也可以傳遞一個對象，而不是多次調用CSS。 像這樣：
$(this).css({ width: 500,
height: 500,
'background-color': '#FFB2B2' });
這是解決您的代碼問題的答案。 但是要以一種可以廣泛接受的方式實際實施此方法，請參考切換類名的答案
- https://stackoverflow.com/a/41969817/2258673
- https://stackoverflow.com/a/41969744/2258673
- https://stackoverflow.com/a/41969768/2258673
$(".option").on("click", function () { if ($(this).width() < 100) { $(this).css("width", "500px"); $(this).css("height", "500px"); $(this).css("background-color", "#FFB2B2"); } else { $(this).css("width", ""); $(this).css("height", ""); $(this).css("background-color", ""); } });
.option{ background-color: #888; width: 75px; height: 75px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="option"></div>
解決方案2
0 2017-01-31 23:59:40
如注釋中所述，應使用$（this）.width（）。 它總是返回一個以px為單位的整數。 不要嘗試使用字符串來比較數字。 使用字符串比較會產生有趣的結果，因為它會逐個字符地進行比較。
例如：字符串“ 1000”小於字符串“ 5”，因為字符“ 1”按字母順序位於“ 5”之前。
解決方案3
0 2017-02-01 00:02:27
不要在同一元素上創建兩個同時沖突的click() 。 另外$(this).width應該是$(this).width()等...
相反，僅使用一個.click()處理函數，並使用.toggleClass()在$(this) clicked元素上切換大型類：
$(".option").click(function(){ $(this).toggleClass("large"); });
.option{ width:100px; height:100px; background: #FFB2B2; transition: 0.3s; -webkit-transition: 0.3s; } .large{ /* Added by jQuery on click */ background: red; width:500px; height:500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="option"></div>
附言：現在上述解決方案之后，它是無關緊要的，但是為了以后通知，請使用.css({})例如：
$(this).css({
width : "500px",
height : 500, // or Number if px are the expected unit
backgroundColor : "#ffb2b2"
});
解決方案4
0 2017-02-01 00:09:28
我會這樣做：
// external.js $(function(){ $('.option').click(function(){ $(this).toggleClass('big'); }); });
/* external.css */ .option{ width:200px; height:200px; background:yellow; } .big{ width:500px; height:500px; background-color:#FFB2B2; }
<!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8' /> <link type='text/css' rel='stylesheet' href='external.css' /> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script> <script src='external.js'></script> </head> <body> <div class='option'>Why do I bother?</div> </body> </html>
解決方案5
-1 2017-02-01 00:04:46
如果您嘗試在兩種狀態之間切換，那么toggleClass是一種更為簡潔的方法。
這將簡單地將CSS應用於活動狀態，並在取消選中狀態時將其刪除。 這樣，您不必擔心綁定Click事件的問題。 我做了一個簡單的jsfiddle例如：
$(document).ready(function() {
$( "div" ).click(function() {
$( this ).toggleClass( "grow" );
});
})
解決方案6
-1 2017-02-01 00:06:11
感謝您的答復！！！ 我終於放下了驕傲，在與我同一個房間里問了一個經驗豐富的家伙。 這就是他所做的，而且效果很好。
$（document）.ready（function（）{
$(".option").on("click", function () { if ($(this).css("width") != "500px") { $(this).css("width", "500px"); $(this).css("height", "500px"); } else { $(this).css("width", "75px"); $(this).css("height", "75px"); } }); });
解決方案7
-2 2017-02-01 00:01:13
嘗試類似：
$('.option').on("click", function() {
$(this).addClass( "isActive" );
$(this).css( "width", "500px" );
$(this).css( "height", "500px" );
$(this).css( "background-color", "#FFB2B2" );
$(this).css( "background-color", "#FFB2B2" );
});
$('.isActive').on("click", function() {
$(this).removeClass( "isActive" );
$(this).removeAttr( "style" );
});
jQuery“ .on（'click'）”事件僅工作一次。 圖像滑塊
[英]jQuery “.on('click')” event works only once. Image Slider
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.