jQuery:根据if / else结果</div>更改每个</p> <div>中的每个<p>

时间:2014-12-01 01:44:10

标签: javascript jquery html css conditional-statements

在我的HTML中,我有一个库,其中每个库项目具有以下格式:

<div class="gallery-img">
     <a href="#" target="_blank">
         <img src="#" />
     </a>
     <p class="imgDescription">November 20th</p>
     <span class="hidden">20141120</span>
</div>

我正在尝试构建一个函数,它将为每个.imgDescription分配一个不同的字符串,具体取决于隐藏<span>和保存当前日期的外部today变量之间的差异。这是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>的{​​{1}}值,然后将结果案例插入相应的.imgDescription?

<span>变量的内容在代码中先前定义。 我使用if / else而不是开关,因为前一个线程表明开关速度会慢30倍。

完全坚持这个!非常感谢帮助:))

3 个答案:

答案 0 :(得分:0)

你的代码有点混乱。所以我在这里和那里修复了一些错误。

<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!"); } });

添加了timediff功能。如果您有疑问,请继续询问。

http://jsfiddle.net/b3rfe4ty/

答案 1 :(得分:0)

您应该比较.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/

答案 2 :(得分:0)

您想将字符串输出到.imgDescription

 $('.gallery-img').each(function() {

     // do what you need...
     $(this).find('.imgDescription').html("Description you want");
 }