如何使用JQuery或Javascript動態檢索圖像src屬性並將其添加到html循環中

Question

我有一個數組對象，我將圖像路徑存儲在索引之一中，我需要檢索它並將其添加到基於位置的img標簽中。 我在數組上運行一個循環以獲取數據，然后在click事件中創建動態html並相應地添加數據，我能夠檢索圖像路徑，但無法添加它。 請指導，任何幫助將不勝感激。

下面是我的代碼：

    <!DOCTYPE html>
    <html>

    <head>
        <!-- Meta -->
        <meta charset="utf-8">
        <title>Xylem</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-
         scale=1.0">
        <meta name="author" content="Samuel Norton">

        <!-- Styles -->
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js">
        </script>
        <script src="http://code.jquery.com/color/jquery.color-
         2.1.0.min.js">
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?
        key=AIzaSyA7whsF1OtjP38MWuQKXVjh1QncWGQh2L0&callback=initMap" async 
        defer></script>
        <style>
            /* Always set the map height explicitly to define the size of 
               the 
             div
             * element that contains the map. */
             #location-page{
             /*border: 1px solid #426D8F;*/
            }
                        #map {
                        /*margin-top: 2.5%;*/
                        top: 5%;
                        margin-left: 16%;
                        height: 90%;
                        width: 68%;
                    }
                </style>

                <script>
                    var map;
                    function initMap() {
                        var uluru = {lat: 83.5, lng: 9};
                        map = new google.maps.Map(document.getElementById('map'), {
                        center: uluru,
                        zoom: 2,
                        minZoom: 1
                        });
                        var geojsonFeature = {
                            "markers": [{
                                "latitude": 18.562158,
                                "longitude": 73.784005,
                                "title": "abc",
                                "address": "xyz",
                                "image1": "img5.jpg",
                                "image2": "C:/Users/pranand/Desktop/img1.jpg",
                            }, {
                                "latitude": 22.434966,
                                "longitude": 73.231136,
                                "title": "abc",
                                "address": "xyz",
                            "image1": "img3.jpg",
                                "image2": "img4.jpg",
                            },
                            {
                                "latitude": 19.259763,
                                "longitude": 72.970113,
                                "title": "abc",
                                "address": "xyz",
                                "image1": "img1.jpg",
                                "image2": "C:/Users/pranand/Desktop/img2.jpg",
                            }]
                        };

                        var infowindow = new google.maps.InfoWindow();
                        var marker;
                        var i;
                        for(i=0;i<geojsonFeature.markers.length;i++){
                            marker= new google.maps.Marker({
                                position: new 
                                google.maps.LatLng(geojsonFeature.markers[i].latitude, 
                                geojsonFeature.markers[i].longitude),
                                map: map,
                                title: geojsonFeature.markers[i].title
                            });
                            google.maps.event.addListener(marker, 'click', 
                            (function(marker, i) {
                                var img1 = $('<img id="img1"/>');
                                img1.attr('src',geojsonFeature.markers[i].image1);
                                console.log(img1);
                                img1.appendTo('.imageDiv');
                                //img1Src= geojsonFeature.markers[i].image1;
                            // console.log(img1Src);
                                //$("#img1").attr('src',img1Src);
                                return function() {
                                infowindow.setContent('<p style = "font-
                                weight:bold;font-size:18px;margin-left:12%;margin-
                                bottom:10px">'+geojsonFeature.markers[i].title+'</p>'+
                                '<div style="margin-bottom:20px">'+ 
                                    geojsonFeature.markers[i].address + '</div>'+
                                '<div class = "imageDiv" style = "margin-left:                         
                                9.5%;">'+
                                img1+
                                '</div>');
                                infowindow.open(map, marker);
                                }
                            })(marker, i));
                        }
                    }
                </script>

                    <script src="js/script.js"></script>
                    <meta name="robots" content="noindex,follow" />
                    </head>

                    <body>
                        <div class="container-fluid">
                        <div id="main-page">
                            <div class="maincontent">
                                <h1>Xylem</h1>
                                <div class="row">
                                    <div class="col-md-6">
                                        <a class="location pull-right"> 
                                        &#x2190;Locations</a>
                                    </div>
                                    <div class="col-md-6">
                                    <a class="product col-md-6">Products &#x2192;</a>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div id="location-page">
                            <!--img src="images/worldMap.jpg" />-->
                            <div id="map"></div>

                            </div>
                        </div>
                        <div id="product-page">
                            <div class="nextcontent">
                                <h1>Great! You're in the Product Page!</h1>
                                <a class="nextlinkProcuct"> &#8592 GO BACK</a>
                            </div>
                        </div>
                    </div>

                    </body>

                    </html>


        <div id="main-page">
        <!--- Main Content Here -->
                </div>

Answer 1

代替

img1.attr('src',geojsonFeature.markers[i].image1);

嘗試

$('#img1').attr('src',geojsonFeature.markers[i].image1);

Answer 2

除了使用jquery對象，您可以使用一個簡單的字符串，如下所示：

 var img1 = '<img id="img1" ';

 img1+= 'src="'+=geojsonFeature.markers[i].image1+'"'

 img1+=' />';

並像執行操作一樣將其附加到內容上

return function（）{infowindow.setContent（''+ geojsonFeature.markers [i] .title +'

'+''+ geojsonFeature.markers [i] .address +``+'9.5％;“>'+ img1 +''）;

如何使用JQuery或Javascript動態檢索圖像src屬性並將其添加到html循環中

問題描述

2 個解決方案

解決方案1
0 2017-12-11 07:23:04

解決方案2
0 已采納 2017-12-11 07:29:01

如何使用JQuery或Javascript動態檢索圖像src屬性並將其添加到html循環中

問題描述

2 個解決方案

解決方案1 0 2017-12-11 07:23:04

解決方案2 0 已采納 2017-12-11 07:29:01

解決方案1
0 2017-12-11 07:23:04

解決方案2
0 已采納 2017-12-11 07:29:01