JQuery - функция повторного использования Несколько раз с одним динамическим значением

Question

ПРИМЕЧАНИЕ: Вот рабочий пример страницы на моем сайте. В настоящее время он работает только для раздела DayZ. https://www.brotherhoodgaming.net/reddit.php

EDIT: Вот мой HTML для мыши redditHeader

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

С помощью StackOverflow в течение последних нескольких месяцев я построил скелет моих первых website.I имеют массивную Jquery Функция JSON, которая извлекает данные из reddit на основе URL-адреса субредда. У меня также есть 3 <div> (Dayz, BuildaPCSales и Bronies в качестве теста).

При нажатии на любой из этих баров я хотел бы мою функцию Javascript динамически загружать данные из 'https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json' - с (subreddit) является вал() текст <div>. В этом примере, если я нажму «Dayz», я хочу, чтобы reddit загружал данные с r/dayz.json без необходимости вручную вводить URL-адрес в код.

Вот моя функция javascript. В настоящее время он успешно работает для любого reddit, который я вручную набираю для URL.

<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(); 
       } 
      ) 
     } 
    }); 
} 

И здесь была моя ужасная попытка вытащить значение текста из „redditHeader“ <div> «s с классом.

$('.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) получить элемент, который был щелкнули и найти() получит ребенок этого элемента. Наконец, я вызываю loadRedditData (subreddit).

Я подавляю каждого(), потому что я действительно не понимаю, чего вы пытаетесь достичь с ним.