Только одно событие click jQuery работает только

Question

У меня есть набор div (75px на 75px). Используя JQ, я пытаюсь сделать это, когда вы нажимаете на div, он становится 500px на 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 делает. он не работает, но не очень удобен.

Answer 1

Как упоминалось в комментариях $ (this) .width() следует использовать. Он всегда возвращает целое число в px. Не пытайтесь использовать строки для сравнения чисел. Использование сравнения строк даст смешные результаты, так как это характерное сравнение символов.

например: строка «1000» меньше строки «5», потому что символ «1» предшествует «5» в алфавитном порядке.

Answer 2

Попробуйте что-то вроде:

$('.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"); 
}); 

Answer 3

Не создавать одновременно два противоречащих друг другу click() сек, связанные в том же элементе. Также $(this).width должны быть $(this).width() и т.д ...

Вместо этого, используйте только один .click() обработчик, и использовать .toggleClass() для переключения вашего большого класса на $(this) щелкнули элемент:

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

PS: теперь после вышеупомянутого решения это не связано, но для вашего будущего уведомления используйте .css({}):

$(this).css({ 
    width : "500px", 
    height : 500,    // or Number if px are the expected unit 
    backgroundColor : "#ffb2b2" 
}); 

Answer 4

toggleClass - намного более чистый подход, если вы пытаетесь переключаться между двумя состояниями.

это просто применит css для активного состояния и удалит его при отмене выбора. таким образом вам не нужно беспокоиться о привязке к событию клика и от него. я сделал простой jsfiddle, например:

$(document).ready(function() { 
    $("div").click(function() { 
     $(this).toggleClass("grow"); 
    }); 
}) 

https://jsfiddle.net/Lrzysvgr/

Answer 5

Спасибо за ответы !!! Я, наконец, отложил свою гордость и попросил гораздо более опытного парня в той же комнате, что и я. Это то, что он сделал, и он работает отлично.

$ (документ).готовы (функция() {

$(".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"); 
    } 
}); }); 

Answer 6

Я хотел бы сделать это следующим образом:

// 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>

Answer 7

ваши проблемы в вашем если заявления, $ .width является функцией и вы сравниваете его со строкой.

• firs t вы должны исправить их и вызвать функцию, изменив $ (this) .width на $ (this) .width(). теперь это выражение возвращает число.
• Вторая проблема заключается в том, что вы сравниваете число со строкой «100px». чтобы решить это изменение «100px» до 100.
• Ваша третья проблема - ваша логика, если логика отменена, вы сначала проверяете, больше ли ширина, чем 100, а затем установите ее на 500x500, которая равна STILL больше 100, изменяя этот символ исправит, что ваша четвертая проблема заключается в подключении двух обработчиков событий, которые будут запускаться один за другим. поэтому он всегда будет возвращаться в исходное состояние. переместите второй оператор в первое событие и установите его как else.

Bonus Вы также можете передать объект вместо делать несколько вызовов 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>