基于jQuery的JS对象存图片链接与可计算日期及HTML加载问题求助

DevOps 小满

2026-5-14

Hey there! Let's work through these two challenges with your item list module—they're totally solvable with jQuery and vanilla JS tricks.

1. Loading Images from JavaScript Objects into HTML

Since you've got your image links stored in a JavaScript object, the trick is to dynamically create <img> elements with jQuery and inject them into your HTML. Here's how to do it step by step:

First, let's assume you have an array of items (super common for a list module):

var items = [
  { id: 1, name: "Vintage Camera", image: "https://example.com/camera.jpg" },
  { id: 2, name: "Handmade Mug", image: "https://example.com/mug.jpg" }
];

Then, loop through each item, create an <img> tag, set its src to the image link from your object, and append it to a container in your HTML (like a <div id="item-container">):

// Loop through each item with jQuery's each method
$.each(items, function(index, item) {
  // Create an img element and configure its attributes
  var $img = $('<img>')
    .attr('src', item.image) // Pull the image link directly from your object
    .attr('alt', item.name) // Always add an alt attribute for accessibility
    .addClass('item-image'); // Optional: add a class for styling

  // Append the image to your container—you could also wrap it in a card div first if needed
  $img.appendTo('#item-container');
});

If you just need to load a single image from an object, it's even simpler:

var singleItem = { image: "https://example.com/single-item.jpg" };
$('#single-image-container').html('<img src="' + singleItem.image + '" alt="Single Item">');

Pro tip: Double-check that your image links are valid and CORS-enabled if they're from an external domain—otherwise you might run into loading errors.

2. Storing & Calculating Date Differences

For storing dates in your objects, you have two reliable options:

Store the date as an ISO 8601 string (e.g., "2024-05-20T14:30:00"), which is easy to serialize and parse.
Store it directly as a JavaScript Date object, which makes arithmetic calculations straightforward right out of the box.

Let's go with Date objects since you need to do date差值 calculations. Here's an example setup:

var items = [
  { id: 1, name: "Laptop", purchaseDate: new Date('2023-09-15') },
  { id: 2, name: "Headphones", purchaseDate: new Date('2024-01-02') }
];

To calculate the difference between two dates (like the purchase date and today), convert the dates to timestamps (milliseconds since epoch) and do simple subtraction. Then convert that difference back to days, hours, or whatever unit you need:

$.each(items, function(index, item) {
  // Get today's date
  var today = new Date();
  // Calculate the time difference in milliseconds
  var timeDiff = today - item.purchaseDate;
  // Convert milliseconds to days (1 day = 1000ms * 60s * 60min * 24hrs)
  var dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

  // Use jQuery to display the calculated difference in your HTML
  $('#item-' + item.id + '-age').text('Purchased ' + dayDiff + ' days ago');
});

If you stored your date as a string instead, just parse it into a Date object first:

var item = { purchaseDateStr: "2023-09-15" };
var purchaseDate = new Date(item.purchaseDateStr);
// Then run the same calculation as above

Note: Date calculations automatically account for time zones. If you need to work with UTC dates, use new Date(Date.UTC(year, month, day)) instead of the standard constructor.

内容的提问来源于stack exchange，提问作者Sunchae Kim