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

Posted 2023-04-15

【中文标题】试图通过 jQuery 使 Spotify 小部件响应但无法完成。帮我

【英文标题】：Trying to make Spotify widget responsive via jQuery but can't get it done. Help me

【发布时间】：2015-03-16 15:23:31

【问题描述】：

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

---

如果父div的宽度大于500px，则

width：父div的宽度

height: 父 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"  ></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 代码。我什至不知道哪里出了问题。

【问题讨论】：

哪部分不明白？

如果 i 存在并且 i 的长度属性 not==0，则在 i 的上下文中将 o 设置为具有 src 和 something.com 的 iframe，否则将 o 设置为具有 src 的 iframe。 com 在当前上下文中

它是一个与 if/else 相同的三元运算，例如 var a = condition ? if true : if false;

【参考方案1】：

正如我在 cmets 部分中提到的：

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

如果这个条件为真/假，这里var o将被分配一个对象

i && i.length

如果它产生一个布尔值true，那么这个在i 上下文中具有特定src 的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"]')

【讨论】：

我已经更新了问题。你现在可以看看吗？ @Jai

【参考方案2】：

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

condition ? expr1 : expr2 

您可以在此处阅读有关它们的更多信息：Conditional (ternary) Operator

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

如果是，则将变量o 设置为引用具有src 属性的iframe，该属性包含i 上下文中的给定子字符串“something.com”。我相信这和说i.find($('iframe[src*="something.com"]'));是一样的。

如果上述条件为假，则为 o 分配对 iframe 的引用，其 src 属性包含“something.com”的给定子字符串

【参考方案3】：

(function(i) 

运行匿名函数的这行代码可能更多。用 function(i) 声明。匿名函数没有设置标识符，尽管您可以将它们分配给变量。

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

var o = i

将 i 赋值为 0。

&&

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

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

下一部分是三元运算符。如果 i.length 的值为 true（可能在 i.length 不等于 0 时），则 *true* 执行，否则 *false* 执行。

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

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