Question

我对jquery比较新，并且一直试图为Wistia视频播放器脚本创建一个单独的功能，而不是一遍又一遍地堆叠相同的功能。这些页面将应用于多达20个视频，每个视频需要特定的网址才能播放。

原件：

wistiaJQuery(document).ready(function () {
    var url = window.location.href.toString();

    // this will autoplay video with url 'www.my-site.com/a-name'
    if (url.indexOf('a-name') != -1) {
    wistiaJQuery('.a-name').click();
    $(".wistia-fancybox #fancybox-overlay").css("display", "block");
    }

    // this will autoplay video with url 'www.my-site.com/b-name'
    if (url.indexOf('b-name') != -1) {
    wistiaJQuery('.b-name').click();
    $(".wistia-fancybox #fancybox-overlay").css("display", "block");
    }

    // this will autoplay video with url 'www.my-site.com/c-name'
    if (url.indexOf('c-name') != -1) {
    wistiaJQuery('.c-name').click();
    $(".wistia-fancybox #fancybox-overlay").css("display", "block");
    }

});

类似于：

wistiaJQuery(document).ready(function () {
    function playVideo(selector) {
        $(selector).each(function () {
            var url = window.location.href.toString();
            var el = $(this);
            var vid = function () {
                if (url.indexOf(el) != -1) {
                    wistiaJQuery('.' + el).click();
                    $(".wistia-fancybox #fancybox-overlay").css("display", "block");
                }
            };
            $(el).on('load', vid);
        });
    }
    playVideo('a-name,b-name,c-name');
});

Answer 1

您的代码已经关闭，只需要进行一些更改：

您需要使用jQuery.each()代替.each()。如果您执行$('a-name,b-name,c-name')，则无法获得任何内容，因为没有元素标记<a-name>，<b-name>或<c-name>。将字符串拆分为数组，然后使用$.each( array, function(index, value) { ... })。然后将el value的引用替换为vid()。
无需定义$(document).ready()函数，并在加载元素时调用它。当您将代码放在wistiaJQuery(document).ready(function () { function playVideo(selector) { $.each(selector.split(","), function (idx, obj) { var url = window.location.href.toString(); if (url.indexOf(obj) != -1) { wistiaJQuery('.' + obj).click(); $(".wistia-fancybox #fancybox-overlay").css("display", "block"); } }); } playVideo('a-name,b-name,c-name'); });中时，该元素已经被加载（并且您不会在原始代码中等待它。）

最后，您可以使用以下内容：

<br>
<div>
    <div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products  | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" >
        <h2 ng-show="product.group_by_CHANGED">{{product.BrandName}} </h2>
        <div class='box'>
            <ng-include src="'commonTemplate.html'"></ng-include>
        </div>
    </div>  



    <!-- template (common piece of code) -->
    <script type="text/ng-template" id="commonTemplate.html">
        <div class="BrandName"> <b>{{product.BrandName}}</b> </div>
        <div class="ProductName"> {{product.ProductName}} </div>
        <br>
        <div> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </div>
        <div class="ProductVariants"> 
            <select class="form-control btn btn-default btn-xs text-center" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select>
        </div>

        <div class="Price"> 
            <strike> {{SelectedVariant.MRP}} </strike> &nbsp; {{SelectedVariant.SellPrice}} 
        </div>      

        <div class="AddToCart" ng-if="SelectedVariant.InCart==0">
            <a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart &nbsp;
                <span class="glyphicon glyphicon-plus"></span> 
            </a>
        </div>

        <div class="AddToCart" ng-if="SelectedVariant.InCart>0">

            <a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)">
                <span class="glyphicon glyphicon-plus"></span> 
            </a>

            <button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button>


            <a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)">
                <span class="glyphicon glyphicon-minus"></span> 
            </a>
        </div>

    </script>

</div>

Wistia自动播放的单一功能

1 个答案: