Question

嗨我试图从输入框设置图像，如果我点击另一个图像，框改变他的值，然后第一个图像改变他的src但我不知道为什么不工作。这是我的脚本

$(document).ready(function() {
    $("#skin").change(function() {
        var inputVal = $(this).val();
        $("#container").attr("src", inputVal);
    });
});

$(document).ready(function() {
    $("#container2").click(function() {
        var source = document.getElementById("container2").src;
        $("#skin").val(source)
    });
});

<input type="text" id="skin">
<img id="container" width="200px" height="200px" border-radius="50%">
<img id="container2" src="http://i.imgur.com/xt0IkTL.png">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

Answer 1

首先，您使用的是jQuery。

所以你不必使用原生的javascript dom选择器。

二;您已经定义了文档就绪功能。你不需要再打电话。

将代码包装在第一个文档就绪函数之间。

我强烈建议您将更改方法更改为其他内容，例如按下按钮或触发其他内容。

完成所有这些建议后;

在这里你可以这样做：

<input id="source-changer" type="text" placeholder="Image url huh?" />
<img id="container" width="200px" height="200px" border-radius="50%"><img id="container2" src="https://i.ytimg.com/vi/PjDtgj7qR94/maxresdefault.jpg" width="100">

<!-- sample address here: https://pp.vk.me/c622424/v622424967/39c6c/6poIwEXow7U.jpg -->

<script>
$(document).ready(function() {
    var firstImage = $('#container');
    var secondImage = $('#container2');

    $('input#source-changer').blur(function(){
        var value = $(this).val();

        if(value !== "") {
            firstImage.attr('src', value);
        }
    });

    secondImage.click(function(){
        firstImage.attr('src', $(this).attr('src'));
    });
});
</script>

在这里测试：

https://jsfiddle.net/upLdgb8y/1/

在图像上单击设置输入值jquery

1 个答案: