Javascript if else改变css [重复]答案

【问题标题】：Javascript if else change css [duplicate]Javascript if else改变css [重复]
【发布时间】：2016-11-22 14:20:07
【问题描述】：

我想知道是否有人可以告诉我为什么这不起作用？它只工作一次。我正在尝试使用基础的开关对象切换div 的高度。当我单击#new 标签时，它也会完美切换。但这不是想法。

var open = 0;
$('#newtopicbutton').click(function() {
  if (open === 0) {
    $('#new').css({
      'height': '440px',
      'color': 'white',
      'font-size': '44px'
    });
    open = 1;
  } else {
    if (open === 1) {
      $('#new').css({
        'height': '48px',
        'color': 'white',
        'font-size': '44px'
      });
      open = 0;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;">
  <div id="newtopicbutton" class="switch small">
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="exampleSwitch">
      <span class="show-for-sr float-right">NEW TOPICS</span>
    </label>
  </div>
</div>

它只工作一次。

【问题讨论】：

您可以通过使用 .toggleClass() 并将您的 CSS 移动到样式表类中来大大简化此操作。
同意@Blazemonger，但如果不同意，请检查此线程：stackoverflow.com/questions/9180087/…
您知道每次点击都会更改的唯一 CSS 属性是 height？效果很好。
它到底应该做什么？ #new div 最小化/最大化正确性
您的第一次点击似乎设置了与样式标签默认的大小相同的大小（440px），因此，第一次点击对高度没有任何改变。也许你应该从一个高度为 48px 的样式标签开始？

标签： javascript html css zurb-foundation

【解决方案1】：

你只需要监听输入按钮上的点击事件，而不是它周围的 div

var open = 0;
$('#exampleSwitch').click(function() {
if (open===0) {
    $('#new').css({
        'height': '440px',
        'color': 'white',
        'font-size': '44px'
    });
	open=1;}
else{
	if (open===1) {
    $('#new').css({
        'height': '48px',
        'color': 'white',
        'font-size': '44px'
    });
	open=0;}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;">
  <div id="newtopicbutton" class="switch small">
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="exampleSwitch">
      <span class="show-for-sr float-right">NEW TOPICS</span>
    </label>
  </div>
</div>

但正如 cmets 中所述，最好使用 .toggleClass 来执行此操作

【讨论】：

感谢它完美运行。当我意识到我听的是 div 而不是复选框时，我感到很愚蠢:(
注意：因为目的是检查input元素是否改变，所以正确的事件应该是change。 @SezerToker

【解决方案2】：

我稍微修改了你的代码：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<body>
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;">
  <div id="newtopicbutton" class="switch small">
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="exampleSwitch">
      <span class="show-for-sr float-right">NEW TOPICS</span>
    </label>
  </div>
</div>
<style>
#newtopicbutton {
font-size: 14px;
}
</style>
<script>
var open = 1;
$('#newtopicbutton, .switch-paddle span').click(function() {
    if (open===0) {
        $('#new').css({
            'height': '440px',
            'color': 'white',
            'font-size': '44px'
        });
        open=1;
    }
    else {
        if (open===1) {
            $('#new').css({
            'height': '48px',
            'color': 'white',
            'font-size': '44px'
            });
        open=0;
        }
    }

    console.log(open);
});
</script>
</body>
</html>

【讨论】：