我的jQuery点击事件只能运行一次

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:

我有一组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", "");
    }
  });
});

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.

我想说明：我已经创建了一个dblclick事件。就像一次点击使它变大，dblclick使它变小。它的工作但不是非常用户友好。

7 个解决方案

#1

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

您的问题在if语句中，$ .width是一个函数，您将它与字符串进行比较。

• first you have to correct these and call the function by changing $(this).width to $(this).width(). now this statement returns a number.
• 首先你必须纠正这些并通过将$（this）.width更改为$（this）.width（）来调用该函数。现在这个语句返回一个数字。
• the second problem is you are comparing a number with the string "100px". to solve this change "100px" to just 100.
• 第二个问题是你将数字与字符串“100px”进行比较。解决这个变化“100px”到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
• 你的第三个问题是如果你的逻辑是相反的，你首先检查宽度是否大于100，然后将其设置为500x500，即STILL大于100，反转这个符号将解决这个问题。
• 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.
• 你的第四个问题是你附加了两个事件处理程序，它们将一个接一个地运行。所以它总是会回到原始状态。将第二个语句移动到第一个事件中并将其设置为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:

奖励如果要一次更改多个css属性，也可以传递对象而不是多次调用css。像这样：

$(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://*.com/a/41969817/2258673
• https://*.com/a/41969817/2258673
• https://*.com/a/41969744/2258673
• https://*.com/a/41969744/2258673
• https://*.com/a/41969768/2258673
• https://*.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

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.

正如评论中提到的那样，$（this）.width（）应该被使用。它总是以px返回一个整数。不要尝试使用字符串来比较数字。使用字符串比较将给出有趣的结果，因为它通过字符比较进行逐字符形式。

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

例如：字符串“1000”小于字符串“5”，因为字符“1”按字母顺序排在“5”之前。

#3

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

不要在同一元素上创建两个同时冲突的click（）。另外$（this）.width应该是$（this）.width（）等...

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

相反，只使用一个.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>

P.S: now after the above solution it's unrelated, but for your future notice use .css({}) like:

P.S：现在在上面的解决方案之后它是无关的，但是为了你将来的通知，请使用.css（{}），如：

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

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

#5

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

如果您尝试在两种状态之间切换，toggleClass是一种更清晰的方法。

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:

这将简单地将css应用于活动状态，并在取消选择时将其删除。这样你就不必担心点击事件的绑定和关闭。我做了一个简单的jsfiddle例如：

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

https://jsfiddle.net/Lrzysvgr/

https://jsfiddle.net/Lrzysvgr/

#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 () {

$（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

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