2

レスポンシブ ビデオにFitVidsを使用しています。次のようにインスタンス化します。

$("#thing-with-videos").fitVids();

fitVids()480px 未満の画面サイズで 1 つの特定の要素に適用したいので、それを実装しました。ただし、表示目的でfitVids()、ユーザーがブラウザーのサイズを変更して表示を小さな幅で確認する場合にも適用する必要があり、このようなことを行いました

jQuery(window).resize( function(){
    $("#other-thing-with-videos.small_width").fitVids();            
});

...これは正常に動作fitVids()しますが、最初に考えたような参照クラスとは対照的に、参照された DOM 要素に適用されているようです。つまり、(より広い画面サイズの場合) クラスを削除しても、fitVids()思った通り。

fitVids()それで、私が要素を呼び出したことを削除する方法はありますか?

編集 - これにunbindメソッドを使用できるかどうか疑問に思っていましたか?

4

3 に答える 3

3

以下は、クラスとすべてのスタイルを親 div から削除します。

$('#container').fitVids();
$("#btn").click(function () 
{
    $(".fluid-width-video-wrapper").removeClass("fluid-width-video-wrapper").removeAttr("style");
});

これにより、FitVid 効果がほとんどなくなります。

jsFiddle : http://jsfiddle.net/hescano/m6Jwx/1/

編集：このソリューションは少しうまくいくと思います：

$.fn.unFitVids = function () {
    var id = $(this).attr("id");
    var $children = $("#" + id + " .fluid-width-video-wrapper").children().clone();
    $("#" + id + " .fluid-width-video-wrapper").remove(); //removes the element
    $("#" + id).append($children); //adds it to the parent
};

そして、次のように要素から呼び出すだけです。

$("#myDiv").unFitVids();

jsFiddle : http://jsfiddle.net/hescano/m6Jwx/2/

私が見ることができる唯一の欠点は、要素を DOM から削除し、クローンを作成して div の親に配置するため、ビデオが既に再生されている場合は停止することです。

于 2013-04-12T00:40:06.530 に答える
1

Hanlets コードは良いアイデアですが、セレクターにビデオが 1 つしかないことを前提としています。

以下の拡張コードは、すべてのビデオをループします

$.fn.unFitVids = function () {
    $.each(this, function(i, el){
        var $wrapper = $(".fluid-width-video-wrapper", el),
            $children = $wrapper.children().clone();
        $wrapper.remove();
        $(el).append($children);
    })
};
于 2014-05-27T15:35:40.110 に答える