Jquery - 使用一个动态值多次重用函数

Question

注意：这是我网站上页面的一个工作示例。目前它仅适用于 DayZ 部分。 https://www.brotherhoodgaming.net/reddit.php

编辑： 这是我点击 redditHeader 的 HTML

<div class="redditHeader grey3">
        <p class="white floatleft">
            DayzUnderground
        </p>
        <i class="material-icons redditHeaderCollapse">
            arrow_drop_down
        </i>
    </div>

在过去几个月里，在 StackOverflow 的帮助下，我已经构建了我的第一个网站的框架。我有一个庞大的 Jquery JSON 函数，它可以根据 subreddit 的 URL 从 reddit 中提取数据。我也有 3 个<div>（Dayz、BuildaPCSales 和 Bronies 作为测试）。

当我点击任何这些栏时，我希望我的 Javascript 函数从'https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json' 动态加载数据 - (subreddit) 是<div> 的 val() 文本。在这个例子中，如果我点击“Dayz”，我希望 reddit 从r/dayz.json 加载数据，而无需在代码中手动输入 URL。

这是我的 javascript 函数。它目前成功地适用于我手动输入 URL 的任何 reddit。

<script>
$('.redditHeader').click(function() {
    var subreddit = $(this).children('.redditBanner').text();
    loadRedditData(subreddit);
});

function loadRedditData(subreddit) {
    $.getJSON('https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json').then(function (data) {
        console.log(data);
        function foo(data) {
            $.each(
                // iterate over 10 children, starting at the 0th index
                data.data.children.forEach(foo); function foo(item, index) { //SAYS I AM MISSING A ")" HERE
                    //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();
                }
            )
        }
    });
}

这是我从 <div> 的“redditHeader”类中提取文本值的糟糕尝试。

$('.redditHeader').each().on('click', function (){
$('p[class="white"]').val();
})

在此先感谢您提供任何可能的帮助。我被难住了！

Answer 1

您无法获得.val() 的<p> 标签！使用.text()！

$('.redditHeader').click(function() {
  var subreddit = $(this).children('.white').text();
  loadRedditData(subreddit);
});

Answer 2

类似的东西应该可以工作：

$('.redditHeader').click(function (event){
    var subreddit = $(event.currentTarget).find('.white').text();
    loadRedditData(subreddit);
 })

$(event.currentTarget) 获取被点击的元素，find() 获取该元素的子元素。最后，我调用 loadRedditData(subreddit)。

我禁止使用 each()，因为我真的不明白你试图用它来实现什么。