Question

所以我尝试使用javascript自动更新图片源，但由于某种原因它无法正常工作。正在从我的php文本生成器中检索图像（生成带有文本的图像），从输入框中抓取文本。我想让它自动抓取输入框内的文本，然后将图像的src更改为gen.php？text = Input_box_text_goes_here

这是我的代码：

<html>
    <head>
        <title>text generator</title>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    </head>
    <body>
        <script language=javascript type='text/javascript'> 
            setInterval(function () {
                var str= document.form.letters.value;
                $('#logo').src("gen.php?text="+str);
            }, 10);
        </script>
        <img id="logo" name="logo" src="gen.php?text=default" />
        <form name="form" action="">
            Text: <input type="text" name="letters"/>
        </form>
    </body>
</html>

任何帮助将不胜感激。

Answer 1

将$('#logo').src("gen.php?text="+str);更改为$('#logo').attr("src", "gen.php?text="+str);。

Answer 2

尝试：

<script>
    $(function(){

        //reference the image
        var img = $('#logo');

        //use onkeyup instead of polling
        $('input[name="letters"]').on('keyUp',function(){

            //get the value every keystroke
            var inputValue = $(this).val();

            //apply the values to the image source
            img.each(function(){
               this.src = "gen.php?text="+inputValue;
            });
        });
    });
</script>

使用jQuery更新图像源

2 个答案: