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

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

首先你必须纠正这些并通过将$（this）.width更改为$（this）.width（）来调用该函数。现在这个语句返回一个数字。
第二个问题是您正在将数字与字符串“100px”进行比较。解决这个改变“100px”到100。
你的第三个问题是你的逻辑是否反转，你首先检查宽度是否大于100，然后将其设置为500x500，即STILL大于100，反转此符号将解决这个问题
你的第四个问题是你附加了两个事件处理程序，它们将一个接一个地运行。所以它总是会回到原始状态。将第二个语句移动到第一个事件中并将其设置为else。

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

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

这是解决代码问题的答案。但要以广泛接受的方式实际实现这一点，请参阅切换类名称的答案

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

如评论中所述，$（this）.width（）应该被使用。它总是以px返回一个整数。不要尝试使用字符串来比较数字。使用字符串比较会得到有趣的结果，因为它通过字符比较进行。

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

Answer 3

不要在同一元素上创建两个同时冲突的db.receiver.findAll({ 'include' : [{ 'model' : db.recording, 'through': {'where' : { 'recording_id' : recordingRow.get( 'id' ) } } }] })绑定。另外click()应为$(this).width等......

相反，只使用一个$(this).width()处理程序，并使用.click()在.toggleClass()点击的元素上切换大类：

＆＃13;

$(this)

＆＃13;

$(".option").click(function(){
  $(this).toggleClass("large");
});

＆＃13;

.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;
}

＆＃13;

P.S：现在经过上述解决方案之后，它是无关的，但是为了您将来的通知，请使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="option"></div>之类的：

.css({})

Answer 4

我会这样做：

＆＃13;

// external.js
$(function(){
  
$('.option').click(function(){
  $(this).toggleClass('big');
});
  
});

＆＃13;

/* external.css */
.option{
  width:200px; height:200px; background:yellow;
}
.big{
  width:500px; height:500px; background-color:#FFB2B2;
}

＆＃13;

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

＆＃13;

Answer 5

如果你试图在两种状态之间切换，

toggleClass是一种更清洁的方法。

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

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

https://jsfiddle.net/Lrzysvgr/

Answer 6

感谢您的回复！我终于把自己的骄傲放在一边，并且和我在同一个房间里找了一个更有经验的人。这就是他所做的，而且它的工作非常完美。

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

尝试类似：

$('.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点击事件只能运行一次

7 个答案: