新手上路，想请教下一些JavaScript 的问题

xunrufly 2019-03-19 02:18:54

如图点击人名旁边的复选框就会出现图片，取消点击图片就消失。大学选修了这个，之前一点基础都没有

要被作业给逼疯了

有没大佬能指点下（能给段代码就最好了

），感激不尽！

...全文

136 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_42966289 2019-03-19

打赏
举报

可以在img上加id jquery针对imgId做显示隐藏操作

xunrufly 2019-03-19

打赏
举报

引用 8 楼 qq_42966289的回复:

还有一点你想保留层的话就只需针对img即可

我还在纳闷那个框架怎么随着图片一起显示和消失的，针对img的话应该怎么加？

qq_42966289 2019-03-19

打赏
举报

还有一点你想保留层的话就只需针对img即可

qq_42966289 2019-03-19

打赏
举报

引用 6 楼 xunrufly 的回复：

[quote=引用 5 楼 qq_42966289的回复:]比如这样:

<html>
<head>
<style>
#div1,#div2 {
display:none;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
$(':checkbox').on('change',function(){
var chkId = $(this).prop('id');
var checked = $(this).prop('checked');
var div = '';
switch (chkId) {
case 'homer':
div = '#div1';
break;
case 'marge':
div = '#div2';
break;
}
if (checked) {
$(div).show();
} else {
$(div).hide();
}
});
});
</script>
</head>
<body>
<input id="homer" type="checkbox">
<label for="homer">Homer Simpson</label>
<input id="marge" type="checkbox">
<label for="marge">Marge Simpson</label>
<div id="div1">
<img src="bart_simpson.png" />
div1
</div>
<div id="div2">
<img src="bart_simpson.png" />
div2
</div>
</body>
</html>

好像成功了不过有点奇怪。。。一开始图片就全部出来了，明明复选框没打钩。如果我想让他一开始不显示图片，等我点击名字对应的复选框才出现图片应该怎么改？[/quote]我代码里默认不显示的注意css里的display

xunrufly 2019-03-19

打赏
举报

引用 5 楼 qq_42966289的回复:

比如这样:

<html>
<head>
<style>
#div1,#div2 {
display:none;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
$(':checkbox').on('change',function(){
var chkId = $(this).prop('id');
var checked = $(this).prop('checked');
var div = '';
switch (chkId) {
case 'homer':
div = '#div1';
break;
case 'marge':
div = '#div2';
break;
}
if (checked) {
$(div).show();
} else {
$(div).hide();
}
});
});
</script>
</head>
<body>
<input id="homer" type="checkbox">
<label for="homer">Homer Simpson</label>
<input id="marge" type="checkbox">
<label for="marge">Marge Simpson</label>
<div id="div1">
<img src="bart_simpson.png" />
div1
</div>
<div id="div2">
<img src="bart_simpson.png" />
div2
</div>
</body>
</html>

好像成功了不过有点奇怪。。。一开始图片就全部出来了，明明复选框没打钩。如果我想让他一开始不显示图片，等我点击名字对应的复选框才出现图片应该怎么改？

qq_42966289 2019-03-19

打赏
举报

比如这样:

<html>
<head>
<style>
#div1,#div2 {
display:none;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
$(':checkbox').on('change',function(){
var chkId = $(this).prop('id');
var checked = $(this).prop('checked');
var div = '';
switch (chkId) {
case 'homer':
div = '#div1';
break;
case 'marge':
div = '#div2';
break;
}
if (checked) {
$(div).show();
} else {
$(div).hide();
}
});
});
</script>
</head>
<body>
<input id="homer" type="checkbox">
<label for="homer">Homer Simpson</label>
<input id="marge" type="checkbox">
<label for="marge">Marge Simpson</label>
<div id="div1">
<img src="bart_simpson.png" />
div1
</div>
<div id="div2">
<img src="bart_simpson.png" />
div2
</div>
</body>
</html>

xunrufly 2019-03-19