我如何得到相反的结果？

Question

Web开发/设计新手

我已经尝试这样做了一个星期，但似乎无法弄清楚，因此我希望可以得到一些帮助，这基本上是一个轻巧的开关

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

嗯，这是我的尝试，我可以通过它来更改背景颜色并切换图像，但是文本似乎没有变化，当我重新单击它时，它并没有恢复为原始状态

这些是图像： 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类和使用可用的jQuery方法 （ 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> 

Answer 2

我不确定这条线是什么意思：

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

如果您试图说“图像上的src属性是否与swon相同”，那么您需要这样做：

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

使用一个参数（即.attr('src') ）调用attr会获得属性，然后使用两个参数（即.attr('src',swon) ）来调用属性，并对其进行设置。 因此，您不必每次都设置它，而不是检查src是否等于swon。 这是它不进行切换的第一个原因。 您的另一行$('img').attr(swon,'src')也很$('img').attr(swon,'src') （错误的参数序列）。

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

注意：您缺少“}）;” 在JS的末尾。