我的jQuery click事件仅工作一次

Question

I have a set of div's(75px by 75px). Using JQ I"m trying to make it so when you click on the div, it becomes 500px by 500px, and if you click it again it returns to it original size. I can make it big, but it doesn't respond to any further clicks. my latest attempt:

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

I've also tried

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

I would like to note: I've created a dblclick event. like one click makes it big, dblclick makes it small. Its works but not very user friendly.

Answer 1

Your problems are in your if statements, $.width is a function and you are comparing it to a string.

• first you have to correct these and call the function by changing $(this).width to $(this).width(). now this statement returns a number.
• the second problem is you are comparing a number with the string "100px". to solve this change "100px" to just 100.
• your third problem is your if logic is reversed, you are first checking if the width is greater than 100 and then setting it to 500x500 which is STILL greater than 100 reversing this symbol would fix that
• your fourth problem is you attach two event handlers that will run one right after the other. so it will always return to original state. move the second statement into the first event and set it as an else.

Bonus You can also pass an object instead of doing multiple calls to css when you want to change more than one css attribute at a time. like so:

$(this).css({ width: 500,
              height: 500,
              'background-color': '#FFB2B2' });

This is an answer to address the problems with your code. But to actually implement this the way that is widely acceptable please refer to the answers that toggle a class name

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

Answer 2

As mentioned in the comments $(this).width() should be used. It always returns an integer in px. Don't try and use strings to compare numbers. Using string comparisons will give funny results since it does a character by character comparison.

for example: the string "1000" is less than the string "5" because the character "1" comes before "5" alphabetically.

Answer 3

Don't create two simultaneous conflicting click() s bound on the same element. Also $(this).width should be $(this).width() etc...

Instead, use only one .click() handler, and use .toggleClass() to toggle your large class on the $(this) clicked element:

 $(".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: now after the above solution it's unrelated, but for your future notice use .css({}) like:

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

Answer 4

I would do it like this:

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

toggleClass is a much cleaner approach if you are trying to switch between two states.

this will simply apply css for an active state and remove it when deselected. this way you dont have to worry about binding on and off a click event. i made a simple jsfiddle for example:

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

https://jsfiddle.net/Lrzysvgr/

Answer 6

Thanks for the replies!!! I finally put my pride aside and asked a much more experience guy in the same room as me. This is what he did and it works perfect.

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

Answer 7

Try something like:

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