1

背景信息：我正在设置一种在我的论坛上嵌入 SoundCloud 的 HTML5 小部件的方法。小部件根据其高度自行调整其内容。正如您在下面的 jsFiddle 示例中看到的那样，我进行了设置，以便当一个小部件悬停在上面时，它的高度从 166 像素扩展到 450 像素，这会触发小部件调整其内容。

我要解决的问题是所有 SoundCloud 小部件都折叠起来，无论它们是否属于设置/播放列表。如果它不是集合/播放列表的一部分，则将鼠标悬停在上面时结果是一个大的空白区域。

我注意到，如果声音是 set/playlist 的一部分，则 /sets/ 会出现在 URL 中。我正在尝试修改我的脚本，以便它检查该字符串的 URL。如果找到它，让小部件在悬停时展开；如果没有，请不要让它在悬停时展开。

目前我遇到了障碍。它有效，但搜索返回的是行中的位置，而不是我需要的字符串。我添加了一些代码来证明：

http://jsfiddle.net/TYWUf/11/

JS没有额外的代码：

jQuery(document).ready(function () {

    var soundSrc = $(".soundCloudEmbed").attr("src");
    var isSet = (soundSrc).search('%' + '2Fsets' + '%' + '2F');

    $(".soundCloudEmbed").hover(
        function () {
            $(this).addClass("soundCloudHover");
        }, function () {
            $(this).removeClass("soundCloudHover");
    });
});

（如果我没有正确地问这个问题，请告诉我）

4

2 回答 2

3

看看这个，我想这就是你要找的：

http://jsfiddle.net/dSX5g/

jQuery(document).ready(function () {

    $('.soundCloudEmbed').each(function () {
        var soundSrc = $(this).attr("src");
        var isSet = (soundSrc).search('%' + '2Fsets' + '%' + '2F');

        if (isSet > -1) {
            $(this).hover(function () {
                $(this).addClass("soundCloudHover");
            }, function () {
                $(this).removeClass("soundCloudHover");
            });
        }
    });

});

每个嵌入的项目都需要单独评估。

于 2013-07-09T20:09:12.830 回答
0

您手动将类设置为 html 属性，然后使用 JQuery 选择器展开该类中的任何内容。您应该首先遍历您的 iframe 并根据它是否是集合的一部分来设置不同的类。这样，JQuery 选择器只会扩展那些是集合的类。

于 2013-07-09T20:13:18.910 回答