javascript - 为棘手的 Jquery 函数添加上下文

Question

我有一个查找特定 <div> 的 Jquery 函数元素并向其中插入信息。我有两个相同的容器，其中有 10 个空白 <div>每个里面的元素。当我点击运行我的函数时，它会将信息正确地加载到第一组空白 <div> 中。元素。当我单击以在第二个容器上再次运行该函数时，它会再次将内容加载回第一个容器。

我一直在研究 Jquery 中的上下文，我相信这可能是我的解决方案。我假设它会工作的方式是我会告诉我的函数“只在这个特定的容器中运行”，这样它就能在两个容器中成功地工作。

实例:1. 点击“图片”。 Reddit 将正确加载。2. 单击“BuildaPCSales。改为将信息加载回图像。

https://brotherhoodgaming.net/reddit.php

脚本

function loadRedditData(redditSearch) {
    $.getJSON(
        'https://www.reddit.com/r/' + encodeURIComponent(redditSearch) + '.json',
        function foo(data) {
            $.each(
                // iterate over 10 children, starting at the 0th index
                data.data.children.slice(0, 11),
                function (i, post) {
                    //Load reddit title in correct div//
                    $('#news' + i + ' .redditTitle').append(
                        $('<a>')
                            .attr('href', 'https://m.reddit.com' + post.data.permalink)
                            .text(post.data.title)
                    );

                    //Load reddit Score (net UP - DOWN)//
                    $('#news' + i + ' .redditScore').prepend(
                        $('<p>')
                            .attr('class', 'redditUpvoteScore')
                            .text(post.data.score)
                    );

                    //Load reddit post-text in HTML format//
                    $('#news' + i + ' .redditPost').append(
                        $('<p>')
                            .text(post.data.selftext_html)
                    );

                    //Load sub-reddit name in HTML format//
                    /*$('#news' + i + ' .subRedditName').append(
                     $('<p>')
                     .attr('class', 'subRedditFormat')
                     .text('r/' + post.data.subreddit)
                     );*/

                    //Load post thumbnail URL into an <a> tag wrapping the image//
                    $('#news' + i + ' .redditThumbnail').append(
                        $('<a>')
                            .attr('href', post.data.url)
                            .attr('class', 'thumbURL')
                    );

                    //Load actual thumbnail into the <a> wrapper tag with the thumbURL class//
                    $('#news' + i + ' .thumbURL').append(
                        $('<img>')
                            .attr('src', post.data.thumbnail)
                            .attr('class', "image news hide floatleft")
                    );

                    //Load reddit Username and URL into container DIV//
                    $('#news' + i + ' .userNameContainer').append(
                        $('<a>')
                            .attr('class', 'redditUserName')
                            .attr('href', 'https://m.reddit.com/user/' + post.data.author)
                            .text(post.data.author)
                    );

                    // Convert post creation time to local time//
                    var utcSeconds = post.data.created_utc;
                    var d = new Date(0);
                    // The 0 is the key, which sets the date to the epoch
                    d.setUTCSeconds(utcSeconds);

                    //Use Moment.js to calculate relative date and append to DIV//
                    $('#news' + i + ' .redditDate').append(
                        moment(d).fromNow()
                    );

                    //Decodes HTML into correct format by replacing unescaped characters//
                    $('.redditPost').each(function () {
                        var $this = $(this);
                        var t = $this.text();
                        $this.html(t.replace('&lt', '<').replace('&gt', '>'));
                        $this.html(t.replace('null', '').replace('null', ''));
                    });

                    //Checks for "self" tagged images and replaces with placeholder image//
                    function changeSourceAll() {
                        var images = document.getElementsByTagName('img');
                        for (var i = 0; i < images.length; i++) {
                            if (images[i].src.indexOf('self') !== -1) {
                                images[i].src = images[i].src.replace("self", "css/images/default.jpg");
                            }
                        }
                        for (var i = 0; i < images.length; i++) {
                            if (images[i].src.indexOf('default') !== -1) {
                                images[i].src = images[i].src.replace("self", "css/images/default.jpg");
                            }
                        }
                        for (var i = 0; i < images.length; i++) {
                            if (images[i].src.indexOf('https://www.brotherhoodgaming.net/default') !== -1) {
                                images[i].src = images[i].src.replace("https://www.brotherhoodgaming.net/default", "css/images/default.jpg");
                            }
                        }
                    }

                    changeSourceAll();
                }
            )
        }
    ).error(function () {
        alert("We are unable to locate your desired subreddit OR you have requested a subreddit that does not exist.");
    })
}

HTML 结构

<div class="redditContainer">
        <div class="redditHeader">
            <p class="subRedditTitle">Images</p>
            <i class="material-icons redditHeaderCollapse">
                arrow_drop_down
            </i>
        </div>
        <div class="cardbox news nopad" style="display:none;">

            // There are 9 more identical copies of these.
           // Removed to save space

            <div class="listrow news nomargin">
                <div class="newsContainer">
                    <div class="redditThumbnail clearfix floatleft"></div>
                    <div class="articleHeader read clearfix">
                        <div class="actionmenuHeader">
                            <div class="userNameContainer"></div>
                            <div class="redditFlair"></div>
                            <div class="subRedditName"></div>
                            <div class="redditDate"></div>
                            <div class="redditScore">
                                <i class="redditUpvote material-icons">
                                    keyboard_arrow_up
                                </i>
                            </div>
                        </div>
                        <p class="redditTitle clearfix mediaTitle news"></p>
                        <div class="redditPost mediumtext"></div>
                    </div>
                </div>
            </div>
         </div>
      </div>

关于如何将其正确加载到每个容器中的任何建议？在过去的 5-6 个小时里，我多次重新安排我的功能，但我离解决我的问题还差得很远。

Answer 1

在您的实例中，有 id 为 newsx 的 div，其中 x 为 1-20。由于使用 $.each，索引 i 将始终从 0 开始。因此每次只会更新前 10 个 newsx div。

您最好应该像这样传递元素:

$('.redditHeader').one("click", function() {
    var redditSearch = $(this).children('.subRedditTitle').text();
    loadRedditData(redditSearch, this);
});

然后通过添加参数在loadRedditData函数中捕获

function loadRedditData(redditSearch, element){
    //code
}

然后基于 loadRedditData 中的元素变量，您可以使用:

var newsList = $(element).next().children();

这将包含当前 header 下所有 newsx div 的列表(如果更改了 DOM，这可能不正确)。当前，DOM 返回所选 header 下的所有 newsx div。然后，您可以使用 newsList[i] 上的数组索引来访问每个 newsx div。例如:

$(newsList[i]).find('.redditScore');

此外，您目前正在遍历 11 条记录并使用除第一条记录之外的所有记录。按照我上面显示的方式进行操作将仅使用前 10 条记录并跳过最后一条。