Question

我一直试图让这个工作，以实现关/开关的效果，如何最好地得到这个结果？任何方法都比其他方法更好？切换？或其他什么。

我试图在这里添加一个片段，但遗憾的是图片没有显示...我在git上有我的代码，如果你想看... http://lucky500.github.io/challenge5/

我明白css可能也不对，我相信这两个图像应该占据相同的空间，其中一个图像应该设置为显示：none ...但我无法将其转换为工作

＆＃13;

$(document).ready(function(){
	console.log("Hello from jQuery!");
$('.switch').on('click', function(){
	$('.night').hide();
	$('.day').show;
})
$('.switch').on('click', function(){
	$('.night').show();
	$('.day').hide();
});

});

＆＃13;

.switch {
	z-index: 1;
	float: right;
}

.day {
	display: none;
	background: url(http://imgur.com/KsK0GCt);
}

.night {
	background: url(http://imgur.com/os0mgek);
}

.night, .day {
	height: 332px;
	width: 225px;
	float: right;
	background-repeat: no-repeat;
}

＆＃13;

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

＆＃13;

Answer 1

<强> jsBin demo

＆＃13;

$(document).ready(function(){
  
  $('.switch').on('click', function(){
    $('.night, .day').toggle();
  });

});

＆＃13;

.switch {
  z-index: 1;
  float: right;
}
.day {
  display: none;
  background: url(http://i.imgur.com/KsK0GCt.png);
}
.night {
  background: url(http://i.imgur.com/os0mgek.png);
}
.night, .day {
  height: 332px;
  width: 225px;
}

＆＃13;

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

＆＃13;

使用jquery show（）和hide（）

1 个答案: