Установить несколько изображений по клику из массива jquery - PullRequest
Новая
       1

Установить несколько изображений по клику из массива jquery

0 голосов
/ 28 января 2020

Я хочу установить несколько изображений и их содержимое одним нажатием кнопки в jquery. Я сохранил путь изображений и его содержимое в массиве. Я хочу получить массив (имя изображения и имя заголовка) и показать изображение и его содержимое в теге img и заголовке. Я написал функцию, но она не работает. Пожалуйста, помогите мне. 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>onclick get images using array</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<style type="text/css">
    .main {
        background-color: #5F9EA0;
    }

    .main h2 {
        color: #ffff;
        font-weight: bold;
    }

    .imageback {
        background-color: #afcecf;
        padding: 30px 0 100px 0;
    }

    button {
        border: none;
        border-radius: 5px;
        background-color: #ffa333;
        padding: 8px 25px;
        font-weight: bold;
        color: #ffff;
        font-size: 18px;
        margin: 15px 0;
    }

    .imagename h4 {
        color: #ffff;
        font-weight: bold;
    }
</style>

<body>
    <header>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 main">
                    <h2 class="text-center">OnClick make gallery using Multiple Arrays</h2>
                </div>
            </div>
        </div>
    </header>

    <section class="imageback">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12"><button>Get Gallery</button></div>
                <div class="col-lg-2 imagename">
                    <img id="myimage0" class="img-responsive" src="">
                    <h4 id="head0" class="text-center"></h4>
                </div>
                <div class="col-lg-2 imagename">
                    <img id="myimage1" class="img-responsive" src="">
                    <h4 id="head1" class="text-center"></h4>
                </div>
                <div class="col-lg-2 imagename">
                    <img id="myimage2" class="img-responsive" src="">
                    <h4 id="head2" class="text-center"></h4>
                </div>
                <div class="col-lg-2 imagename">
                    <img id="myimage3" class="img-responsive" src="">
                    <h4 id="head3" class="text-center"></h4>
                </div>
                <div class="col-lg-2 imagename">
                    <img id="myimage4" class="img-responsive" src="">
                    <h4 id="head4" class="text-center"></h4>
                </div>
                <div class="col-lg-2 imagename">
                    <img id="myimage5" class="img-responsive" src="">
                    <h4 id="head5" class="text-center"></h4>
                </div>
            </div>
        </div>
    </section>
    <p id="demo"></p>
    <script type="text/javascript">
        $(document).ready(function () {

            $("button").click(function () {
                myfunction();
            });

            function myfunction() {
                var imagename = ["images/furniture_sofa_interior_design.jpg", "images/sofa_furniture_chair_cushion.jpg", "images/sofa_furniture_style_modern.jpg", "images/room-wallpaper-full-hd.jpg", "images/523224.jpg", "images/hotel_room_bed_furniture.jpg"];
                var headname = ["Sofa Interior", "Sofa Furniture Chair", "Sofa Modern", "Room Wallpaper", "Room Theater", "Hotel Room Interior"];

                $(".imagename").each(function () {
                    imagename += $(this).attr("src", imagename[]);

                });

            }

        });
    </script>


</body>

</html>

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Надеюсь, это то, что вы ищете 

$("button").click(function() {
 var id = 0;
 var html = '';
 var data = {
 "images/furniture_sofa_interior_design.jpg" : "Sofa Interior",   
 "images/sofa_furniture_chair_cushion.jpg" : "Sofa Furniture Chair", 
 "images/sofa_furniture_style_modern.jpg" : "Sofa Modern", 
 "images/room-wallpaper-full-hd.jpg" : "Room Wallpaper", 
 "images/523224.jpg" : "Room Theater", 
 "images/hotel_room_bed_furniture.jpg" : "Hotel Room Interior"};



$.each(data, function(img, name){

html = '<div class="col-lg-2">';
html += '<img id="myimage'+id+'" class="img-responsive" src="'+img+'">';
html += '<h4 id="head'+id+'" class="text-center">'+name+'</h4>';
html += '</div>';

id++;
$('body').append(html);
})
          
});
.main {
        background-color: #5F9EA0;
    }

    .main h2 {
        color: #ffff;
        font-weight: bold;
    }

    .imageback {
        background-color: #afcecf;
        padding: 30px 0 100px 0;
    }

    button {
        border: none;
        border-radius: 5px;
        background-color: #ffa333;
        padding: 8px 25px;
        font-weight: bold;
        color: #ffff;
        font-size: 18px;
        margin: 15px 0;
    }

    .imagename h4 {
        color: #ffff;
        font-weight: bold;
    }
<head>
  <title>onclick get images using array</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<section class="imageback">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12"><button>Get Gallery</button>
            </div>
        </div>
    </div>
</section>
0 голосов
/ 28 января 2020

Этот код неверен: 

$(".imagename").each(function () {
    imagename += $(this).attr("src", imagename[]);
});

Вы пытаетесь объединить массив с использованием строкового синтаксиса, что не имеет смысла.

Попробуйте заменить этот код на этот one: 

$(".imagename > img").each(function (index) {
    $(this).attr("src", imagename[index]);
});

Здесь вы восстанавливаете все изображения с классом imagename и устанавливаете их атрибут src.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...