Показать изображение или слово на клавиатуре JQuery

Question

Показать изображение или слово на клавиатуре JQuery

0

Мой код ниже делает следующее: каждый раз, когда 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>

ben_aaron 15 март 2014, в 10:46

Источник

Теги:

javascript

jquery

html

2 ответа

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>

kamil 15 март 2014, в 07:30

Ещё вопросы

Grant Gibson · Accepted Answer · 2014-03-15T07-18-00.000Z

Я изменил ваш javascript, чтобы объединить две функции, поместить изображение и текст в одну и ту же цель (div) и зафиксировать пару незначительных ошибок.

См. Демонстрацию live jsFiddle с рабочими изображениями здесь

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