Question

我正在尝试加载特定的值，有一天会有更大的JSON响应（Wistia上的视频）。目前，它只有两个视频（slatwall.mp4＆amp; igoodworks.mp4）及其各自的数据，如json HERE所示。

如果存在v.name两个值，则下面的javascript效果很好*。但是，如果您将slatwall.mp4更改为其他内容，则if语句都不起作用，并且else语句被调用..即使存在igoodworks.mp4。

Javascript（JSFiddle也在下面）：

var projectUrl = "https://api.wistia.com/v1/projects/7mal1h1pl4.json?api_password=<api password>"

$.getJSON(projectUrl, function (data) {

$('#thumb').show();
$('#thumb2').show();

$.each(data.medias, function (i, v) {

    var thumb_orig = v.thumbnail.url;
    var thumb_size = "640x360";
    var thumb = thumb_orig.replace('100x60', thumb_size);
    var duration = v.duration;
    var name = v.name;
    var created = v.created;
    var status = v.status;

    if (v.name == "slatwall.mp4") {
        $('#thumb').attr('src', thumb);
        $('#duration').text(duration + " seconds long");
        $('#status').text(name);
        return;
    } 
    if (v.name == "igoodworks.mp4") {
        $('#thumb2').attr('src', thumb);
        $('#duration2').text(duration + " seconds long");
        $('#status2').text(name);
        return;
    } else {
        $('body').html('No Videos Found');
    }
    })
});

我正在努力完成的任何帮助？

JSFiddle

Answer 1

对于找不到匹配项的每次迭代，它会将文档的整个主体更改为“找不到视频”。在后续迭代中，您正在定位的ID（thumb2等）不再存在。

更简洁的方法是动态组合内容。摆脱硬编码的divs，并将回调函数更改为：

function (data) {
    var found = false;
    $.each(data.medias, function (i, v) {
        found = true;
        var thumb_orig = v.thumbnail.url;
        var thumb_size = "640x360";
        var thumb = thumb_orig.replace('100x60',thumb_size);
        var duration = v.duration;
        var name = v.name;
        var created = v.created;
        var status = v.status;

        $('body').append('<img src="' + thumb + '"/>').append('<div>' + duration + ' seconds long</div>').append('<div>' + name + '</div>');
    })

    if (!found) {
        $('body').html('No Videos Found');
    }
}

Answer 2

首先，您可以重复使用代码（只需将1添加到您的第一个元素ID中）。您可以检查$.inArray(v.name, namesArray) !== -1是否知道名称是否有效。这样你就可以拥有无限的视频，而不必重新编写相同的代码。

要检查是否找到了所有视频，只需计算视频的数量inArray并将其与视频总数进行比较（不太了解未找到某些视频时必须发生的事情; 在{{ 1}} $.each表示return false，break表示return true 。

还考虑重新格式化HTML以摆脱ID：动态内容创建，动态元素选择等。

continue

var names = [
  'slatwall.mp4',
  'igoodworks.mp4'
];

var totalFound = 0;
var index = 0;
var total = 0;

data = {
  "id": 2014528,
  "name": "Vipheo Uploads",
  "mediaCount": 2,
  "created": "2015-11-03T23:36:48+00:00",
  "updated": "2015-11-04T06:57:06+00:00",
  "hashedId": "7mal1h1pl4",
  "anonymousCanUpload": false,
  "anonymousCanDownload": false,
  "public": true,
  "publicId": "7mal1h1pl4",
  "description": "\n",
  "medias": [{
    "id": 16565434,
    "name": "igoodworks.mp4",
    "type": "Video",
    "created": "2015-11-04T05:49:46+00:00",
    "updated": "2015-11-04T06:57:02+00:00",
    "duration": 65.152,
    "hashed_id": "87bwf7o64z",
    "description": "",
    "progress": 1.0,
    "status": "ready",
    "thumbnail": {
      "url": "https://embed-ssl.wistia.com/deliveries/cc0fc1451586501156eeec7625914e9d210226b5.jpg?image_crop_resized=100x60",
      "width": 100,
      "height": 60
    }
  }, {
    "id": 16561778,
    "name": "slatwall.mp4",
    "type": "Video",
    "created": "2015-11-03T23:40:16+00:00",
    "updated": "2015-11-04T06:57:06+00:00",
    "duration": 61.808,
    "hashed_id": "q0ynu4iasa",
    "description": "",
    "progress": 1.0,
    "status": "ready",
    "thumbnail": {
      "url": "https://embed-ssl.wistia.com/deliveries/90b9231d07e0f49219b0b7fc5c39afa07d2542f1.jpg?image_crop_resized=100x60",
      "width": 100,
      "height": 60
    }
  }]
};

$.each(data.medias, function(k, v) {
  index++;

  if ($.inArray(v.name, names) !== -1) {
    var thumb_orig = v.thumbnail.url;
    var thumb_size = "640x360";
    var thumb = thumb_orig.replace('100x60', thumb_size);
    var duration = v.duration;
    var name = v.name;
    var created = v.created;
    var status = v.status;

    totalFound++;

    $('#thumb' + index).attr('src', thumb);
    $('#duration' + index).text(duration + " seconds long");
    $('#status' + index).text(name);
  }
});

if (totalFound != index || index == 1) {
  alert('Videos not found');
}

多个if语句 - 全部或全部？

2 个答案: