Question

此代码必定有问题。假设以这种方式调整Spotify iframe的大小：

如果父div的宽度超过500px，那么

width：父div的宽度

高度：父div的宽度+ 80px

或者如果父div的宽度不超过500px，那么

width：父div的宽度

身高：80px

function(spotify) {
  var w = $(".audio-embed").width(),
    h = w + 80,
    s = spotify && spotify.length ? $('iframe[src*="embed.spotify.com"]', spotify) : $('iframe[src*="embed.spotify.com"]');
  s.each(w > 500 ? function() {
    $(this).css({
        width: w,
        height: h
      }),
      $(this).attr("src", $(this).attr("src"));
  } : function() {
    $(this).css({
        width: w,
        height: 80
      }),
      $(this).attr("src", $(this).attr("src"));
  });
});

.audio-embed {
  overflow: hidden;
  position: relative;
  width: 100%;
}
iframe {
  max-width: 100%;
}
.spotify_audio_player {
  width: 100%;
}

<div class="audio-embed">
  <iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A4DfUmbnnxpRlwLsFYfmGfn&amp;view=coverart" frameborder="0" allowtransparency="true" width="500" height="580"></iframe>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

function (spotify) { var w = $(".audio-embed").width(), h = w + 80, s = spotify && spotify.length ? $('iframe[src*="embed.spotify.com"]', spotify) : $('iframe[src*="embed.spotify.com"]'); s.each(w > 500 ? function () { $(this).css({ width: w, height: h }), $(this).attr("src", $(this).attr("src")); } : function () { $(this).css({ width: w, height: 80 }), $(this).attr("src", $(this).attr("src")); }); });

我知道我对jQuery代码并不擅长。我甚至无法弄清楚它出了什么问题。

Answer 1

正如我在评论部分提到的那样：

var o = i && i.length ? $('iframe[src*="something.com"]', i) : $('iframe[src*="something.com"]');

如果此条件为真/假

，

此处var o将被分配一个对象

i && i.length

如果它导致布尔值true，那么src上下文中具有特定i的iframe jquery对象将被分配给var o：

$('iframe[src*="something.com"]', i) // find iframe with specific src in "i"
                                     // where i could be document or parent
                                     // of the iframe.

上面的选择器也可以这样写：

$(i).find('iframe[src*="something.com"]') // works same as above.

否则如果条件导致false，那么将分配具有特定src的iframe jquery对象：

$('iframe[src*="something.com"]')

Answer 2

它本质上是一个三元条件。这是语法：

condition ? expr1 : expr2

您可以在此处详细了解它们：Conditional (ternary) Operator

将其分解，这种情况下的条件为i && i.length。这意味着变量i包含一个真值（what's that?）并且其长度大于零。这是使用jQuery检查页面上是否存在元素的典型方法。

如果是，那么变量o被设置为引用iframe，其src属性包含＆＃34; something.com＆＃34;的给定子字符串。在i的背景下。我认为这与说i.find($('iframe[src*="something.com"]'));相同。

如果上述条件为false，则为o分配对iframe的引用，其中src属性包含＆＃34; something.com＆＃34;

的给定子字符串

Answer 3

(function(i) {

此行上可能会有更多代码运行匿名函数。用函数（i）{。声明的。匿名函数没有设置标识符，但您可以将它们分配给变量。

下一行相当复杂，所以我会尝试将其分解：

var o = i

将i指定为0。

&&

如果o计算结果为true，则执行该行的下一部分，如果计算结果为false则不执行。这是因为javascript是一种动态类型语言。

i.length ? *true* : *false*;

下一部分是三元运算符。如果i.length评估为真（可能是当i.length不等于0时），那么* true *执行，如果不是* false *执行。

$('iframe[src*="something.com"]', i) and $('iframe[src*="something.com"]');

最后一部分是jQuery选择器，第一部分使用i作为它的上下文，第二部分使用默认上下文（我相信它是整个网页，或者html）。上下文定义了jQuery查找元素的位置。

试图通过jQuery使Spotify小部件响应，但无法完成它。帮我

3 个答案: