jQuery:根据if/else结果更改每个

jQuery: changing each <p> in each <div> depending on if/else result

本文关键字:结果 else 根据 if jQuery      更新时间:2023-09-26
中的每个

在我的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");
 }