jQuery:根据if/else结果更改每个
jQuery: changing each <p> in each <div> depending on if/else result
。
在我的HTML中,我有一个图库,其中每个图库项都有以下格式:
<div class="gallery-img">
<a href="#" target="_blank">
<img src="#" />
</a>
<p class="imgDescription">November 20th</p>
<span class="hidden">20141120</span>
</div>
我目前正在尝试构建一个函数,该函数将根据隐藏<span>
和保存当前日期的外部today
变量之间的差异为每个 .imgDescription 分配不同的字符串。下面是 JS/jQuery:
today = yyyy+mm+dd;
$('.gallery-img').each(function() {
var itemRelease = $('.gallery-img span');
var timeToRelease = itemRelease - today;
if(timeToRelease < -1) {
$('.imgDescription').val(timeToRelease + " " + "days ago.");
} else if(timeToRelease > +1) {
$(this).val("In" + " " + timeToRelease + " " + "days");
} else if(timeToRelease === -1) {
$(this).val("Released yesterday");
} else if(timeToRelease === 1) {
$(this).val("Releases tomorrow");
} else if(timeToRelease === 0) {
$(this).val("Releases today!");
}
});
我将如何让jQuery比较每个<div>
的<span>
值,然后将结果插入到相应的.imgDescription中?
today
变量的内容在代码的前面部分定义。我使用了 if/else 而不是开关,因为前一个线程表明开关会慢 30 倍。
完全卡在这个上面!:)
您应该比较每个.gallery-img
// wrap in document ready
$(function() {
var today = new Date();
var dd = today.getDate();
var mm = (today.getMonth()+1) * 100; //January is 0! *100 to form single number
var yyyy = today.getFullYear() * 10000; // *10000 to form single number
today = yyyy+mm+dd;
var todayString = today.toString();
$('.gallery-img').each(function() {
var $this = $(this);
var itemRelease = $this.find('span');
var imgDescription = $this.find('.imgDescription');
var timeToRelease = campareDate(toDate(todayString), toDate(itemRelease.text()));
console.log(timeToRelease);
if(timeToRelease > 1) {
imgDescription.text(timeToRelease + " " + "days ago.");
} else if(timeToRelease < -1) {
imgDescription.text("In" + " " + -timeToRelease + " " + "days");
} else if(timeToRelease === 1) {
imgDescription.text("Released yesterday");
} else if(timeToRelease === -1) {
imgDescription.text("Releases tomorrow");
} else if(timeToRelease === 0) {
imgDescription.text("Releases today!");
}
});
});
function toDate(str) {
return new Date(str.substr(0,4) + '-' + str.substr(4, 2) + '-' + str.substr(6, 2));
}
function campareDate(date1, date2) {
return Math.floor((date1 - date2) / (86400 * 1000));
}
演示:
http://jsfiddle.net/70nzrgxy/1/
你的代码有点乱。所以我在这里和那里修复了一些错误。
<div class="gallery-img">
<a href="#" target="_blank">
<img src="#" />
</a>
<p class="imgDescription" release-date="2014-11-20">November 20th</p>
</div>
删除了跨度,我想你不需要这个,因为是隐藏的。
$('.gallery-img').each(function() {
var itemRelease = $(this).find('p').attr('release-date');
var itemReleaseDate = new Date(itemRelease);
var timeToRelease = dateDiff(today,itemReleaseDate);
if(timeToRelease < -1) {
$(this).find('p').text(timeToRelease + " " + "days ago.");
} else if(timeToRelease > 1) {
$(this).find('p').text("In" + " " + timeToRelease + " " + "days");
} else if(timeToRelease === -1) {
$(this).find('p').text("Released yesterday");
} else if(timeToRelease === 1) {
$(this).find('p').text("Releases tomorrow");
} else if(timeToRelease === 0) {
$(this).find('p').text("Releases today!");
}
});
添加了时间差异函数。如果您有任何疑问,请继续提问。
http://jsfiddle.net/b3rfe4ty/
你想把你的字符串输出到你的.imgDescription
?
$('.gallery-img').each(function() {
// do what you need...
$(this).find('.imgDescription').html("Description you want");
}
- 奇怪的Javascript结果
- 如何在ReactJS JSX中执行嵌套的if-else语句
- Javascript(jQuery)给了我奇怪的结果
- 正在尝试使用if和else添加类,但无法正常工作
- JSONP请求返回结果,但也触发error_callback
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- Javascript,输出结果后页面不断刷新
- 将颜色格式添加到 IF ELSE 结果
- Javascript 函数.可变结果.为什么未定义或没有 如果 else 语句函数
- jQuery:根据if/else结果更改每个
- 简单搜索结果页面:if/else 使用 localStorage 变量和 document.write 时出现问题
- 根据php-if/else语句的结果创建javascript操作
- 将if和else-if功能与选择输入一起使用(根据公里和英里转换结果)
- 使用HTML输入切换Javascript Else If.检查值并相应地显示结果.成本估算员
- Javascript查找表与else-if和多个匹配结果
- 从select html标签中选择的值在javascript if/else语句中没有产生正确的结果
- If else语句没有给出预期结果
- CasperJS中if/else语句中的测试结果
- 为什么我的if-else语句返回错误的结果
- 在javascript中使用if-else检查数据表结果