javascript - 我如何得到相反的结果？

Question

网络开发/设计领域的新手

我已经尝试这样做一个星期了，但似乎无法弄清楚所以我希望我能得到一些帮助，它基本上是一个电灯开关

所以我想做的是，当我点击开关时，背景会改变颜色，文本和图像也会改变，反之亦然。

嗯，这是我的尝试，我可以让它改变背景颜色和切换图像，但文本似乎没有改变，当我重新点击它时，它没有变回原来的状态

图片如下: http://oi59.tinypic.com/96xhec.jpg http://oi62.tinypic.com/350ug5l.jpg

html:

<img class="swoff" src="img/switch_off.png">

<span class="msg">Hey, who turn off the lights?</span>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')    </script>

    <script src="js/main.js"></script>
</body>

CSS:

body {
font-family:'Raleway', sans-serif;
font-size:1em;
text-align:center;
margin-top:31%;
background:#151515;
}

.swoff {
display:block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:200px;
height:200px;
}

.msg {
color:#fff;
}

.lighttxt {
color:#3c3c3c;
}

Javascript:

$('.swoff').on('click', function() {

var dark = "Hey, who turn off the lights?";
var light = "It's so bright in here!";
var swon = "img/switch_on.png";

if($('img').attr('src',swon)) {

    $('body').css({'background-color':'#FFFFF2'});
    $('msg').html(dark);

}
else {

    $('img').attr(swon,'src')
    $('body').css({'background-color':'#151515'});
    $('msg').html(light);
}

Answer 1

我认为使用 CSS 类和使用 available jQuery methods 更容易(addClass、removeClass 等)。

在 jQuery 中，在元素事件中，快捷方式 $(this) 指的是元素本身:

$('element').on('click', function(){ $(this).something(); });

此外，使用 # 来定位元素的 ID (#id) 和 . 来定位类 (.class )，我们仅针对 HTML 标记(input、img、form 等)省略此选项。

---

可运行代码段:

$('#switch').on('click', function() {

    var dark = "Hey, who turn off the lights?";
    var light = "It's so bright in here!";
  
    if( $(this).hasClass('swoff') ) {
        $(this).removeClass('swoff').addClass('swon');
    	$('body').css({'background-color':'#FFFFF2'});
    	$('#msg').html(light).removeClass('darktext').addClass('lighttxt');
    }
    else {
        $(this).removeClass('swon').addClass('swoff');
        $('body').css({'background-color':'#151515'});
        $('#msg').html(dark).removeClass('lighttxt').addClass('darktext');
    }
});

body {
  font-family:'Raleway', sans-serif;
  font-size:1em;
  text-align:center;
  background:#151515;
}
#switch {
  display:block;
  margin: auto;
  width:200px;
  height:200px;
}
.swoff {
  background-image: url('http://i.stack.imgur.com/I7Clv.png');
  background-size: 100% 100%;
}
.swon {
  background-image: url('http://i.stack.imgur.com/vbKrW.png');
  background-size: 100% 100%;
}
.darktxt {
  color:#fff;
}
.lighttxt {
  color:#3c3c3c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="switch" class="swoff"></div>

<span id="msg" class="darktxt">Hey, who turn off the lights?</span>