Javascript 如果存在多个元素，如何使用jQuery选择器指向正确的元素？_Javascript_Jquery_Html_Jquery Selectors_Youtube Api

Javascript 如果存在多个元素，如何使用jQuery选择器指向正确的元素？

javascript jquery html youtube-api

Javascript 如果存在多个元素，如何使用jQuery选择器指向正确的元素？,javascript,jquery,html,jquery-selectors,youtube-api,Javascript,Jquery,Html,Jquery Selectors,Youtube Api,使用jQuery选择器在html中选择元素时遇到困难。我正在创建一个带有复选框和视频标签的分类过滤器。我试图找出如何为每个基于其视频标签显示/隐藏的视频缩略图元素以及是否选中复选框都具有唯一标识符。我有一个函数，它基本上从另一个函数获取视频标签，该函数循环遍历每个视频并提取其标签数组值，如下所示： // print the results function(data) { var output; $.each(da

使用jQuery选择器在html中选择元素时遇到困难。我正在创建一个带有复选框和视频标签的分类过滤器。我试图找出如何为每个基于其视频标签显示/隐藏的视频缩略图元素以及是否选中复选框都具有唯一标识符。我有一个函数，它基本上从另一个函数获取视频标签，该函数循环遍历每个视频并提取其标签数组值，如下所示：

// print the results
        function(data)
        {
            var output;

            $.each(data.items, 
                function(i, item) 
                {
                    var vidTitle = item.snippet.title; // video title
                    var vidDesc = item.snippet.description; // video description
                    var videoId = item.snippet.resourceId.videoId; // video id
                    var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url
                    getVideoDuration(videoId).done(function(duration, view/*, tags*/)
                    {
                        vidDuration = duration;

                        viewCount = view;

                        //vidTags = tags;


                        // check if video tags is empty or undefined 
                        if(typeof videoTags === 'undefined' || videoTags == "" || videoTags === null)
                        {
                            videoTags = "No tags have been defined for this video.";
                        }


                        // check input categories
                        validateCategory(videoTags);


                        console.log("id: " + videoId + " duration: " + convert_time(vidDuration) + " viewCount: " + viewCount + ' videoTags: ' + videoTags); // return value in console
                        //console.log(JSON.stringify(item));
                        console.log("<br>");


                        output = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + videoId + '\"></iframe></li><div id="title">' + vidTitle + '</div><div id="desc">' + vidDesc + '</div><div id="duration">Length: ' + convert_time(vidDuration) + '</div><div id="stats">View Count: ' + viewCount + '</div><div id="tags">Tags: ' + videoTags + '</div>';

                        // if video title is longer than 25 characters, insert the three-dotted ellipse
                        if(vidTitle.length > 25)
                        {
                            var strNewVidTitle = vidTitle.substr(0, 25) + "...";
                            vidTitle = strNewVidTitle;
                        }
                        var vidThumbnail = '<div class="video-thumbnail"><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="' + vidThumbUrl + '" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '">' + vidTitle + '</a><br/>' + convert_time(vidDuration) + ' / Views: ' + viewCount + '</p></div>';


                        // append results
                        $('#results').append(output);
                        $('#thumb').append(vidThumbnail);


                    }); // end of getVideoDuration(videoId).done
                }
            ); // end of getViewCount(videoId).done
        }

HTML:

<div id="container">
    <h1>Youtube Videos</h1>
    <ul id="results"></ul>
    <hr/>
    <h1>Thumbnails</h1>
    <div id="thumb"></div>
    <div id="category-list" class="getFixed">
        <h1>Categories</h1>
        <input class="categories" type="checkbox" name="filter" value="Reading" checked>Reading<br/>
        <input class="categories" type="checkbox" name="filter" value="Math" checked>Math<br/>
        <input class="categories" type="checkbox" name="filter" value="Science" checked>Science
    </div>
</div>


Youtube视频


缩略图
类别
阅读

数学

科学类

validateCategory（…）

函数将成功循环，但它不会引用jQuery选择器使用

这个视频缩略图类来显示/隐藏类别中的特定视频，就像类别过滤器一样。我甚至做了背景色和可见性，但都不起作用。我正在试图找出如何将这两个和这两个链接在一起。
它看起来像是此
指的是窗口中的对象，它位于validateCategory（）
函数中。窗口对象没有直接访问dom的权限，因此您需要使用this.document
或只使用document
。但是，我认为您不想在本例中引用整个文档。这样做将在每次迭代中对.video thumbnail
类的每个成员进行更改。我认为您应该在为每个条目构建vidjumblynail div
后调用此函数，并将此div作为参数传递：
    function(data)
    {
        var output;

        $.each(data.items, 
            function(i, item) 
            {
                var vidTitle = item.snippet.title; // video title
                var vidDesc = item.snippet.description; // video description
                var videoId = item.snippet.resourceId.videoId; // video id
                var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url
                getVideoDuration(videoId).done(function(duration, view/*, tags*/)
                {
                    vidDuration = duration;

                    viewCount = view;

                    //vidTags = tags;


                    // check if video tags is empty or undefined 
                    if(typeof videoTags === 'undefined' || videoTags == "" || videoTags === null)
                    {
                        videoTags = "No tags have been defined for this video.";
                    }

                    console.log("id: " + videoId + " duration: " + convert_time(vidDuration) + " viewCount: " + viewCount + ' videoTags: ' + videoTags); // return value in console
                    //console.log(JSON.stringify(item));
                    console.log("<br>");


                    output = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + videoId + '\"></iframe></li><div id="title">' + vidTitle + '</div><div id="desc">' + vidDesc + '</div><div id="duration">Length: ' + convert_time(vidDuration) + '</div><div id="stats">View Count: ' + viewCount + '</div><div id="tags">Tags: ' + videoTags + '</div>';

                    // if video title is longer than 25 characters, insert the three-dotted ellipse
                    if(vidTitle.length > 25)
                    {
                        var strNewVidTitle = vidTitle.substr(0, 25) + "...";
                        vidTitle = strNewVidTitle;
                    }
                    var vidThumbnail = '<div class="video-thumbnail"><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="' + vidThumbUrl + '" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '">' + vidTitle + '</a><br/>' + convert_time(vidDuration) + ' / Views: ' + viewCount + '</p></div>';

                    // check input categories
                    validateCategory(videoTags, vidThumbnail);

                    // append results
                    $('#results').append(output);
                    $('#thumb').append(vidThumbnail);


                }); // end of getVideoDuration(videoId).done
            }
        ); // end of getViewCount(videoId).done
    }


function validateCategory(videoTags, vidThumbnail) // TODO: add videoId to make an unique identifier for said video thumbnail.
{
    // check if input category is or isn't checked and omit videos not matching checked categories
    if($('input[value="reading"]').is(':checked'))
    {
        console.log('%c reading: ' + ".is(':checked'):", 'color:blue;'); // check if 'pregnancy' is checked
        for(i = 0; i < videoTags.length; i++)
        {
            if(videoTags[i] === "reading".trim().toLowerCase())
            {
                $('.video-thumbnail', vidThumbnail).css({visibility:'visible'});
                $('.video-thumbnail', vidThumbnail).show();
                $('.video-thumbnail', vidThumbnail).attr('rel','reading'); // set rel attribute according to tag name as a unique identifier
                $('.video-thumbnail', vidThumbnail).css({backgroundColor:'red'});
            }
            else
            {
                $('.video-thumbnail', vidThumbnail).css({visibility:'hidden'});
                $('.video-thumbnail', vidThumbnail).hide();
            }
        }
    }
    else
    {
        $('.video-thumbnail', vidThumbnail).css({visibility:'hidden'});
        $('.video-thumbnail', vidThumbnail).hide();
    }
}  

功能（数据）
{
var输出；
$。每个（数据项，
职能（一、项目）
{
var vidTitle=item.snippet.title；//视频标题
var vidDesc=item.snippet.description；//视频描述
var videoId=item.snippet.resourceId.videoId；//视频id
var vidThumbUrl=item.snippet.thumbnails.default.url；//视频缩略图url
getVideoDuration（videoId）.done（函数（duration，view/*，tags*/）
{
持续时间=持续时间；
viewCount=视图；
//视频标签=标签；
//检查视频标签是否为空或未定义
如果（视频标签的类型=='undefined'| |视频标签==“”| |视频标签===null）
{
videoTags=“尚未为此视频定义任何标记。”；
}
log（“id:+videoId+”持续时间：“+convert_time（vidDuration）+”viewCount:“+viewCount+”videoTags:“+videoTags”）；//在控制台中返回值
//log（JSON.stringify（item））；
console.log（“
”）；
输出=''+vidTitle+'+vidDesc+'长度：'+convert_时间（vidDuration）+'视图计数：'+viewCount+'标记：'+videoTags+''；
//如果视频标题超过25个字符，请插入三个点椭圆
如果（vidTitle.length>25）
{
var strNewVidTitle=vidTitle.substr（0,25）+“…”；
vidTitle=strNewVidTitle；
}
var vidThumbnail='
'+convert_time（vidDuration）+'/Views:'+viewCount+''；
//检查输入类别
validateCategory（视频标签、视频缩略图）；
//附加结果
$（“#结果”）。追加（输出）；
$（'#thumb'）。追加（vidThumbnail）；
})；//getVideoDuration（videoId）的结束。完成
}
)；//getViewCount（videoId）结束。完成
}
函数validateCategory（videoTags，Vid缩略图）//TODO:添加videoId为所述视频缩略图创建唯一标识符。
{
//检查输入类别是否选中，并忽略与选中类别不匹配的视频
如果（$（'input[value=“reading”]”）是（':checked'））
{
console.log（“%c reading:”+“.is（“：checked”）：”，“color:blue；”；//检查是否选中了“怀孕”
对于（i=0；i
它看起来像是此
引用了函数中的窗口
对象。窗口对象没有直接访问dom的权限，因此您需要使用this.document
或只使用document
。但是，我认为您不想在本例中引用整个文档。这样做将在每次迭代中对.video thumbnail
类的每个成员进行更改。我认为您应该在为每个条目构建vidjumblynail div
后调用此函数，并将此div作为参数传递：
    function(data)
    {
        var output;

        $.each(data.items, 
            function(i, item) 
            {
                var vidTitle = item.snippet.title; // video title
                var vidDesc = item.snippet.description; // video description
                var videoId = item.snippet.resourceId.videoId; // video id
                var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url
                getVideoDuration(videoId).done(function(duration, view/*, tags*/)
                {
                    vidDuration = duration;

                    viewCount = view;

                    //vidTags = tags;


                    // check if video tags is empty or undefined 
                    if(typeof videoTags === 'undefined' || videoTags == "" || videoTags === null)
                    {
                        videoTags = "No tags have been defined for this video.";
                    }

                    console.log("id: " + videoId + " duration: " + convert_time(vidDuration) + " viewCount: " + viewCount + ' videoTags: ' + videoTags); // return value in console
                    //console.log(JSON.stringify(item));
                    console.log("<br>");


                    output = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + videoId + '\"></iframe></li><div id="title">' + vidTitle + '</div><div id="desc">' + vidDesc + '</div><div id="duration">Length: ' + convert_time(vidDuration) + '</div><div id="stats">View Count: ' + viewCount + '</div><div id="tags">Tags: ' + videoTags + '</div>';

                    // if video title is longer than 25 characters, insert the three-dotted ellipse
                    if(vidTitle.length > 25)
                    {
                        var strNewVidTitle = vidTitle.substr(0, 25) + "...";
                        vidTitle = strNewVidTitle;
                    }
                    var vidThumbnail = '<div class="video-thumbnail"><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="' + vidThumbUrl + '" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '">' + vidTitle + '</a><br/>' + convert_time(vidDuration) + ' / Views: ' + viewCount + '</p></div>';

                    // check input categories
                    validateCategory(videoTags, vidThumbnail);

                    // append results
                    $('#results').append(output);
                    $('#thumb').append(vidThumbnail);


                }); // end of getVideoDuration(videoId).done
            }
        ); // end of getViewCount(videoId).done
    }


function validateCategory(videoTags, vidThumbnail) // TODO: add videoId to make an unique identifier for said video thumbnail.
{
    // check if input category is or isn't checked and omit videos not matching checked categories
    if($('input[value="reading"]').is(':checked'))
    {
        console.log('%c reading: ' + ".is(':checked'):", 'color:blue;'); // check if 'pregnancy' is checked
        for(i = 0; i < videoTags.length; i++)
        {
            if(videoTags[i] === "reading".trim().toLowerCase())
            {
                $('.video-thumbnail', vidThumbnail).css({visibility:'visible'});
                $('.video-thumbnail', vidThumbnail).show();
                $('.video-thumbnail', vidThumbnail).attr('rel','reading'); // set rel attribute according to tag name as a unique identifier
                $('.video-thumbnail', vidThumbnail).css({backgroundColor:'red'});
            }
            else
            {
                $('.video-thumbnail', vidThumbnail).css({visibility:'hidden'});
                $('.video-thumbnail', vidThumbnail).hide();
            }
        }
    }
    else
    {
        $('.video-thumbnail', vidThumbnail).css({visibility:'hidden'});
        $('.video-thumbnail', vidThumbnail).hide();
    }
}  

功能（数据）
{
var输出；
$。每个（数据项，
职能（一、项目）
{
var vidTitle=item.snippet.tit