在按键jquery上显示图像或单词

时间:2014-03-15 09:26:01

标签: javascript jquery html

我的下面的代码执行以下操作:每按一次A或L,图像和屏幕上的字就会改变。 有没有办法只显示单词或图像(最好是随机顺序)。 html中是否有可以同时包含单词和图像的字段?

我的目标是将两个函数合并为一个 - 在按键上 - 显示图像或单词。

<p id="word_abc" class="words" style="font-size:20px"></p>
<p style="text-align: center"><img id="img_abc" src="" 
        alt="" height="300px" width="300px" style="position:absolute; top:200px; left:500px"/></p>

<script type="text/javascript">
    var words = [ "WORD1", "WORD2", "WORD3" ];
    var pictures = new Array()
        pictures[1]="...PICTURE1.jpg"
        pictures[2]="...PICTURE2.jpg"
        pictures[3]="...PICTURE3.jpg"


    $(function(){
        $(document).keypress(function(e){
            if ($(e.target).is('input, textarea')) {
                return;
            };
            if (e.which === 97 || e.which === 108) {
                new_word = words[Math.floor(Math.random() * words.length)];;
                $("#word_abc").text(words);
            };
            });
    });

    $(function(){
        $(document).keypress(function(e){
            if ($(e.target).is('input, textarea')) {
                return;
            };
            if (e.which === 97 || e.which === 108) {
                    new_picture = picture[Math.floor(Math.random() * picture.length)];
                    $("#img_abc").prop('src', new_picture);
        };
            });
    });

    </script>

2 个答案:

答案 0 :(得分:1)

我会在顶级添加随机性。将选择<p><img>,如下所示:

<script type="text/javascript">
var words = [ "WORD1", "WORD2", "WORD3" ];
var pictures = new Array()
    pictures[1]="...PICTURE1.jpg"
    pictures[2]="...PICTURE2.jpg"
    pictures[3]="...PICTURE3.jpg"


$(function(){
    $(document).keypress(function(e){
        if ($(e.target).is('input, textarea')) {
            return;
        };
        if (e.which === 97 || e.which === 108) {

            if( Math.floor((Math.random()*10)+1) % 2 ) {
                var new_word = words[Math.floor(Math.random() * words.length)];;
                $("#word_abc").text(words);
            } else {
                var new_picture = picture[Math.floor(Math.random() * picture.length)];
                $("#img_abc").prop('src', new_picture);
            }
        };
    });
});

</script>

答案 1 :(得分:1)

我已经调整了你的javascript以合并这两个函数,将图像和文本放到同一个目标(div)中并修复了一些小错误。

<强> See live jsFiddle demo with working images here

HTML

<div id="abc" class="words">Focus in the results frame, then press A or L.</div>

的Javascript

var words = [ "Monkey", "Donkey", "Woof" ];
var pictures = new Array()
pictures[0]="http://lorempixel.com/400/200/sports/1/"
pictures[1]="http://lorempixel.com/400/200/sports/2/"
pictures[2]="http://lorempixel.com/400/200/sports/3/"


$(function(){
    $(document).keypress(function(e){
        if ($(e.target).is('input, textarea')) {
            return;
        };
        if (e.which === 97 || e.which === 108) {
            if(Math.random() < 0.5) {
                // Show a word
                new_word = words[Math.floor(Math.random() * words.length)];;
                $("#abc").text(new_word);
            } else {
                // Show an image
                var new_img =  pictures[Math.floor(Math.random() * pictures.length)];;
                $("#abc").empty();
                var imgtag = $('<img id="abcimg">');
                imgtag.attr('src',new_img);
                imgtag.appendTo('#abc');
            }
        };
    });
});