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等。）

可运行的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我不确定你对这一行有什么想法：

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

如果你想说＆＃34;图像上的src属性与swon＆＃34;相同，那么你想要这个：

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

使用一个参数（即.attr('src')）调用attr获取属性，用两个（即.attr('src',swon)）调用它，设置它。因此，不是检查src是否等于swon，而是每次都设置它。这是它没有切换的第一个原因。你的另一行$('img').attr(swon,'src')也很糟糕（错误的参数序列）。

还有更多要解决的问题，但希望有所帮助。

注意：您错过了＆＃34;}）;＆＃34;在JS的最后。

我如何得到相反的结果？

2 个答案: