Question

每次尝试将a标记悬停时，我都试图显示一个新图像。我的getJSON请求正在工作，但我似乎无法使函数结果随机化。

我有以下可用的JSON数据：

[
 {"url":"http:\/\/image1.jpg"},
 {"url":"http:\/\/image2.jpg"},
 {"url":"http:\/\/image3.jpg"},
 {"url":"http:\/\/image4.jpg"}
]

我的getJSON请求看起来像这样：

  $('.imagehover').on(
    'mouseenter',
    function() {
      $.getJSON('images.json', function(result) {
        $.each(result, function(i, field){
          var urlPorperty = Object.keys(jsonData.url);
          var index = Math.floor(Math.random() * urlPorperty.length);
          var imageUrl = urlPorperty[index];
          $("#imagetestresult").html("<img src=" + field.url + ">");
        });
      });
    }
  );

HTML在这里

<a href="#" class="imagehover">Images
<div id="imagetestresult"></div></a>

任何建议将不胜感激：）

Answer 1

回调参数已经是一个javascript对象，您无需解析它。
jQuery.html（）仅将html字符串直接打印到所选元素内容。如果要将网址显示为可见图像，可以使用css background-image属性显示它

在成功回调后执行此操作

{
    "url": [
        "http:\/\/image1.jpg",
        "http:\/\/image2.jpg",
        "http:\/\/image3.jpg",
        "http:\/\/image4.jpg"
    ]
}

更新1

您可以将url json简化为相同级别的数组

$('.imagehover').on('mouseenter', function() {
    $.getJSON('images.json', function(result) {
        // random pick an index
        var index = Math.floor(result.url.length * Math.random());

        // replace the content with a <img>
        $("#imagetestresult").html($('<img>', {
            src : result.url[index]
        }));
    });
});

正如Shiva Pandey指出的那样，在鼠标事件上触发Ajax可能不切实际。由于ajax是异步的，因此http需要花费一些时间，并且用户体验可能不太流畅。无论如何。

parallel

Answer 2

答案先生。 Brickowski 是完美的选择。我想补充一点。每次鼠标进入事件发生时，请勿进行ajax调用。以后会给您带来很多麻烦。取而代之的是先进行Ajax调用，然后将数据保存在urlProperty等变量中，然后在MouseEnter上执行其余的随机选择。

显示JSON数据中的随机值

2 个答案: