首页 新闻 搜索 专区 学院

点击不同的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']")
})
})

写不出来了麻烦大佬帮我看看

小白萝卜呀的主页 小白萝卜呀 | 初学一级 | 园豆:6
提问于:2020-03-15 20:55
< >
分享
最佳答案
1

圖片應該用img而不是div
你可選擇切換img上的src來變換圖片
也可以放置多個img,透過show(), hide()方法切換

奖励园豆:5
RosonJ | 老鸟四级 |园豆:4905 | 2020-03-16 09:50

$(document).ready(function(){
$("#span").on("click",function(){
$("img").toggle();
})
})
是这样写吗

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 10:04

@小白萝卜呀:

$(document).ready(function () {
    $("#span").on("click", function () {
        $("img").prop('src', '圖片地址');
        //or
        $("img").show();
        $("img").hide();
    })
})
RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 10:14

@RosonJ: 不是这样的,我是想点击span,然后id#img这个div里面就显示span下的图片,我乱打乱撞的写出了点击span让div显示隐藏了uploading-image-12010.png

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 10:16

@小白萝卜呀:
喔喔,那你原本寫得沒錯

RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 10:50

@RosonJ: 就是不知道怎么将图片显示在那个div里面,一直写不出来

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 10:51

@小白萝卜呀:
div不能顯示圖片
得在裡面放img

RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 10:53

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

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 11:12

@小白萝卜呀:

$(function() {
    $('[name="span"]').on('click', function() {
        $(this).next('img').toggle();
    })
})

span的id改用name

RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 11:16

@RosonJ: 您这个的话是显示在它的旁边,我想显示在
这个里面

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 11:25

@小白萝卜呀:
喔喔,沒注意到

$(function() {
    $('[name="span"]').on('click', function() {
        $img = $(this).next('img').clone();
        $('#img').html($img);
    })
})
RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 11:32

@RosonJ: 如果我想把某个值传到另外一个div内是用.html赋值过去吗

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 11:36

@小白萝卜呀:
是的,html是把element放進去當子元素,直接放字串也是可以

RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 11:40

@RosonJ: 好像没效果emmmm

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 11:40

@小白萝卜呀:
span的id記得改成name
因為你的span不只一個

RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 11:42

@RosonJ: 已经改了,还是没有效果

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 11:42

@RosonJ:

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 11:43

@小白萝卜呀:
完整頁面貼上來我看看,光看這個區塊應該是沒問題

RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 11:44

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

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 11:47

@小白萝卜呀:

<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 | 园豆:4905 (老鸟四级) | 2020-03-16 13:04

@RosonJ: 谢谢,我找到问题了,我设置了display:none;了元素都被隐藏了

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 14:57

@RosonJ: $(function() {
$('[name="span"]').on('click', function() {
$(this).next('span').clone();
$('#img').html(this);
})
})
大佬,我想换一个就是我点击span,把span内容传进去,我这样写的话,我点击一个span有传进去,但是点一个就消失一个了是什么问题呢

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 17:13

@小白萝卜呀:

$('#img').html(this);

這句的意思是: 把 this 搬到 '#img' 裡面當作子元素
沒有先複製就會直接被搬走喔

RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 17:18

@RosonJ: 我太菜了,改来改去的不报错也实现不了,,,,害

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 17:33

@小白萝卜呀:
JS有很多小特性,沒經驗很容易踩坑
我也是踩得受不了,找的本書乖乖從頭看到尾

RosonJ | 园豆:4905 (老鸟四级) | 2020-03-16 17:39

@RosonJ: 得嘞,我再看看怎么写先

小白萝卜呀 | 园豆:6 (初学一级) | 2020-03-16 17:41
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册