点击不同的span在div中显示不同的图片
0
[已解决问题]
解决于 2020-03-16 14:57
<div>
<span id="span">第一个span</span>
<div><input type="image" src="jine.png" /></div>
</div>
<div>
<span>第二个span</span>
<div><input type="image" src="jine.png" /></div>
</div>
<div>
<span>第三个span</span>
<div><input type="image" src="jine.png" /></div>
</div>
<div>
<span>第四个span</span>
<div><input type="image" src="jine.png" /></div>
</div>
<div id="img"></div>
img{
width: 200px;
height: 200px;
border: red solid 1px;
}$(document).ready(function(){
$("#span").on("click",function(){
$("input[stype='image']")
})
})
写不出来了麻烦大佬帮我看看
最佳答案
1
圖片應該用img而不是div
你可選擇切換img上的src來變換圖片
也可以放置多個img，透過show(), hide()方法切換
奖励园豆：5
$(document).ready(function(){
$("#span").on("click",function(){
$("img").toggle();
})
})
是这样写吗
@小白萝卜呀:
$(document).ready(function () {
$("#span").on("click", function () {
$("img").prop('src', '圖片地址');
//or
$("img").show();
$("img").hide();
})
})@RosonJ: 不是这样的，我是想点击span，然后id#img这个div里面就显示span下的图片，我乱打乱撞的写出了点击span让div显示隐藏了uploading-image-12010.png
@小白萝卜呀:
喔喔，那你原本寫得沒錯
@RosonJ: 就是不知道怎么将图片显示在那个div里面，一直写不出来
@小白萝卜呀:
div不能顯示圖片
得在裡面放img
@RosonJ:我想把图片显示在div里面，现在我改成了这样了，我想点击span然后将图片显示在最后的那个imgdiv里面
<div>
<span id="span">第一个span</span>
<img src="图片3.png" >
</div>
<div>
<span id="span">第二个span</span>
<img src="wxzf.png" >
</div>
<div>
<span id="span">第三个span</span>
<img src="042.png" >
</div>
<div>
<span id="span">第四个span</span>
<img src="gx.png" >
</div>
<div id="img"></div>
@小白萝卜呀:
$(function() {
$('[name="span"]').on('click', function() {
$(this).next('img').toggle();
})
})span的id改用name
@RosonJ: 您这个的话是显示在它的旁边，我想显示在
这个里面
@小白萝卜呀:
喔喔，沒注意到
$(function() {
$('[name="span"]').on('click', function() {
$img = $(this).next('img').clone();
$('#img').html($img);
})
})@RosonJ: 如果我想把某个值传到另外一个div内是用.html赋值过去吗
@小白萝卜呀:
是的，html是把element放進去當子元素，直接放字串也是可以
@RosonJ: 好像没效果emmmm
@小白萝卜呀:
span的id記得改成name
因為你的span不只一個
@RosonJ: 已经改了，还是没有效果
@RosonJ: 
@小白萝卜呀:
完整頁面貼上來我看看，光看這個區塊應該是沒問題
@RosonJ: 好的，稍等
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<div id="a1"></div>
<div>
<span name="span">第一个span</span>
<img src="图片3.png" >
</div>
<div>
<span name="span">第二个span</span>
<img src="wxzf.png" >
</div>
<div>
<span name="span">第三个span</span>
<img src="042.png" >
</div>
<div>
<span name="span">第四个span</span>
<img src="gx.png" >
</div>
<div id="img"></div>
$(function() {
$('[name="span"]').on('click', function() {
$img = $(this).next('img').clone();
$('#img').html($img);
})
})
@小白萝卜呀:
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('[name="span"]').on('click', function() {
$img = $(this).next('img').clone();
$('#img').html($img);
})
})
</script>
</head>
<body>
<div id="a1"></div>
<div>
<span name="span">第一个span</span>
<img src="图片3.png">
</div>
<div>
<span name="span">第二个span</span>
<img src="wxzf.png">
</div>
<div>
<span name="span">第三个span</span>
<img src="042.png">
</div>
<div>
<span name="span">第四个span</span>
<img src="gx.png">
</div>
<div id="img"></div>
</body>
</html>我測試沒問題喔，你檢查一下
@RosonJ: 谢谢，我找到问题了，我设置了display：none；了元素都被隐藏了
@RosonJ: $(function() {
$('[name="span"]').on('click', function() {
$(this).next('span').clone();
$('#img').html(this);
})
})
大佬，我想换一个就是我点击span，把span内容传进去，我这样写的话，我点击一个span有传进去，但是点一个就消失一个了是什么问题呢
@小白萝卜呀:
$('#img').html(this);這句的意思是: 把 this 搬到 '#img' 裡面當作子元素
沒有先複製就會直接被搬走喔
@RosonJ: 我太菜了，改来改去的不报错也实现不了，，，，害
@小白萝卜呀:
JS有很多小特性，沒經驗很容易踩坑
我也是踩得受不了，找的本書乖乖從頭看到尾
@RosonJ: 得嘞，我再看看怎么写先