时间戳

首页 > 解决方案 > 使用 jQuery/JavaScript 在图像上插入/显示对象的属性

javascript - 使用 jQuery/JavaScript 在图像上插入/显示对象的属性

问题描述

我试图实现这个结果输出，但我被困在下面给出的这个结果上，我想在图像上添加文本但我无法访问对象的属性，我使用了after()方法但没有任何帮助将不胜感激。

$(document).ready(function() {
  let aku = {
    ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square1.png',
    ResourceName: 'level-1',
    resources: {
      ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square2.png',
      ResourceName: 'level-2',
      resources: {
        ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square3.png',
        ResourceName: 'level-3'
      }
    }
  }
  let abhi = [aku.ObjectUrl,
    aku.resources.ObjectUrl,
    aku.resources.resources.ObjectUrl
  ]

  $("#img-id").attr("src", abhi[0]);
  $("#img-id-1").attr("src", abhi[1]);
  $("#img-id-2").attr("src", abhi[2]);
});
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#img-id {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#img-id-1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25em;
  height: 25em;
  z-index: -1;
}

#img-id-2 {
  position: fixed;
  width: 13em;
  height: 10em;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="aku"><img src="level1" id="img-id"></div>
  <div class="aku-1"><img src="level2" id="img-id-1"></div>
  <div class="aku-2"><img src="level3" id="img-id-2"></div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="jq2.js"></script>
</body>
</html>

如果有任何其他方法可以解决这个问题，我很高兴听到它..

标签： javascriptjqueryhtmlcss

解决方案

检查此代码

    $(document).ready(function () {
        let aku = {

            ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square1.png',
            ResourceName: 'level-1',
            resources:
            {
                ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square2.png',
                ResourceName: 'level-2',
                resources:
                {
                    ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square3.png',
                    ResourceName: 'level-3'
                }
            }
        }
        let abhi = [aku.ObjectUrl,
        aku.resources.ObjectUrl,
        aku.resources.resources.ObjectUrl
        ];


        //<span class="caption"> Text below the image</span>
        $("#img-id").attr("src", abhi[0]);
        $("#img-id-1").attr("src", abhi[1]);
        $("#img-id-2").attr("src", abhi[2]);

        function getResourceName(obj, url) {
            for (var k in obj) {
                if (obj[k] == url) {
                    return obj.ResourceName;
                }
                else if (k == "resources")
                    return getResourceName(obj[k], url);
            }

        }

        $("img").on('load', function () {
            var resourceName = getResourceName(aku, $(this).attr("src"));
            $(this).after('<span class="caption" style="top: ' + ($(this).position().top + $(this).height()) + 'px"> ' + resourceName+'</span>');
        });
    });
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    #img-id {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 12em;
        height: 7em;
        transform: translate(-50%, -50%);
    }

    #img-id-1:after {
        content: " - Remember this";
        background-color: yellow;
        color: red;
        font-weight: bold;
    }

    #img-id-1 {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 15em;
        height: 11em;
        z-index: -1;
    }

    #img-id-2 {
        position: fixed;
        width: 7em;
        height: 4em;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
    }

    .caption {
        position: fixed;
        left: 48%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="aku"><img src="level1" id="img-id"></div>
<div class="aku-1"><img src="level2" id="img-id-1"></div>
<div class="aku-2"><img src="level3" id="img-id-2"></div>

推荐阅读