[英]Jquery - Reuse Function Multiple Times With One Dynamic Value
NOTE: Here is a working example of the page on my website. 注意:这是我网站上该页面的有效示例。 Currently it only works for the DayZ section.
目前,它仅适用于DayZ部分。 https://www.brotherhoodgaming.net/reddit.php
https://www.brotherhoodgaming.net/reddit.php
EDIT: Here is my HTML for the click redditHeader 编辑:这是我的HTML,用于单击redditHeader
<div class="redditHeader grey3">
<p class="white floatleft">
DayzUnderground
</p>
<i class="material-icons redditHeaderCollapse">
arrow_drop_down
</i>
</div>
With the help of StackOverflow over the last few months I have built the skeleton of my first website.I have a massive Jquery JSON function that pulls data from reddit based on the URL of the subreddit. 在过去的几个月中,借助StackOverflow,我构建了第一个网站的框架。我有一个庞大的Jquery JSON函数,该函数根据subreddit的URL从reddit中提取数据。 I also have 3
<div>
's ( Dayz , BuildaPCSales and Bronies as a test). 我也有3个
<div>
(作为测试的Dayz , BuildaPCSales和Bronies )。
When I click on any of those bars I would like my Javascript function to dynamically load data from 'https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json'
- with (subreddit) being the val() text of the <div>
. 当我单击任何这些栏时,我希望我的Javascript函数从
'https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json'
动态加载数据,其中(subreddit)为val() <div>
文本。 In this example, if I click on "Dayz" I want the reddit to load data from r/dayz.json
without having to manually type the URL into the code. 在此示例中,如果我单击“ Dayz”,则希望reddit从
r/dayz.json
加载数据,而无需在代码中手动键入URL。
Here is my javascript function. 这是我的JavaScript函数。 It currently works, successfully, for any reddit that I manually type the URL for.
目前,对于我手动输入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('<','<').replace('>', '>'));
$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();
}
)
}
});
}
And here was my terrible attempt to pull the value of the text from the <div>
's with class "redditHeader". 这是我为从
<div>
的类“ redditHeader”中提取文本值所做的可怕尝试。
$('.redditHeader').each().on('click', function (){
$('p[class="white"]').val();
})
Thanks in advance for any possible help on this. 在此先感谢您提供任何可能的帮助。 Im stumped!
我很沮丧!
Something like that should work : 这样的事情应该工作:
$('.redditHeader').click(function (event){
var subreddit = $(event.currentTarget).find('.white').text();
loadRedditData(subreddit);
})
The $(event.currentTarget) get the element that have been clicked on and find() will get the child of this element. $(event.currentTarget)获取已单击的元素,find()将获取此元素的子级。 Finally, I call loadRedditData(subreddit).
最后,我调用loadRedditData(subreddit)。
I suppress the each() because I don't really understand what you try to achieve with it. 我抑制了each(),因为我不太了解您尝试使用它实现什么。
You can't get .val()
of a <p>
tag! 您无法获得
<p>
标记的.val()
! Use .text()
! 使用
.text()
!
$('.redditHeader').click(function() { var subreddit = $(this).children('.white').text(); loadRedditData(subreddit); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.