Я использую загрузчик и JQuery. У меня есть 4 картинки, и я хочу, чтобы одна отображалась случайным образом каждый раз, когда кто-то нажимает на кнопку. Я попытался создать массив изображений, а затем использовать кнопку для вызова функции, но она не работает. Есть идеи, что я делаю не так?

Это кнопка

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
            <button id="button" type="button" class="btn btn-primary">New Photo</button>
        </div>
    </div>
</div>

Это где я хочу, чтобы изображение отображалось

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
            <img id="picture">
        </div>
    </div>
</div>

Это мой сценарий

<script>
    $(document).ready(function() {
        $("#button").click(function() {
            displayPics();
        });
    });


    function displayPics() {

        var imagesArray = new Array();

        imagesArray = [
            "CM.jpg", "DC.jpg", "MG.jpg", "SW.jpg"
        ]

        var num = Math.floor(Math.random() * (imagesArray.length + 1));
        var img = imagesArray[num];

        $("picture").html("<img src='" + img + "' />")
    }

    window.onload = init;
</script>
0
MarcoPolo 25 Окт 2019 в 03:28

2 ответа

Лучший ответ

Ваш код нуждается в двух исправлениях.

Исправить A: заменить это:

var num = Math.floor(Math.random() * (imagesArray.length + 1));

С этим:

var num = Math.floor(Math.random() * imagesArray.length);

Это необходимо, потому что в исходном коде ваше случайное число будет в диапазоне от 0 до 4, а не от 0 до 3.

Исправить B: заменить это:

$("picture").html("<img src='" + img + "' />")

С этим:

$("#picture").attr("src", img);

Это необходимо, потому что для выбора по идентификатору необходимо добавить #, и вам нужно изменить только атрибут src, поэтому использование attr - это путь.

2
Ayrton 25 Окт 2019 в 00:41
$("picture").html("<img src='" + img + "' />");
$("#picture").attr('src',img);

Вы потеряли HTML-селектор.

-1
garam hyeon 25 Окт 2019 в 00:34
58550701