网站产品滑块尺寸切换时更新图片src及data属性需求实现

Got it, let's build this size selection feature to work seamlessly with your existing color picker logic. Here's a practical implementation tailored to your requirements:

Step 1: Prepare Your Size Selection HTML #

First, make sure your size options have the necessary data attributes to carry the info we need for updates. Assuming your existing slider has size divs, update them like this:

<!-- Add this size selection section in your slider (adjust class names to match your existing code) -->
<div class="header-module-sizes">
  <span class="size-option active" data-size="M" data-image-suffix="-medium" data-product-code-suffix="-M">Medium ($29.99)</span>
  <span class="size-option" data-size="L" data-image-suffix="-large" data-product-code-suffix="-L">Large ($39.99)</span>
</div>

• data-size: Stores the size label for quick reference
• data-image-suffix: The string we'll append to the color-selected image URL to get the size-specific version
• data-product-code-suffix: The string we'll append to the color-selected product code

Step 2: JavaScript Implementation #

This code will handle size selection clicks, sync with your existing color logic, and update the image and product details accordingly:

// Grab key elements from the DOM
const sizeOptions = document.querySelectorAll('.header-module-sizes .size-option');
const productImage = document.querySelector('.header-module-images img');
const productCodeSpan = document.querySelector('i.product-code span');

// Store current color data so we can combine it with size selections later
let activeColorData = {
  imageSrc: productImage.src,
  productCode: productCodeSpan.textContent,
  color: productCodeSpan.style.color
};

// Sync with your existing color selection logic (update activeColorData when color changes)
const colorSwatches = document.querySelectorAll('.header-module-swatches span');
colorSwatches.forEach(swatch => {
  swatch.addEventListener('click', () => {
    // Activate the selected swatch (your existing logic)
    colorSwatches.forEach(s => s.classList.remove('active'));
    swatch.classList.add('active');
    
    // Save the current color's data for size updates
    activeColorData.imageSrc = swatch.dataset.image;
    activeColorData.productCode = swatch.dataset.productcode;
    activeColorData.color = swatch.dataset.productcolor;
    
    // Apply color changes (your existing logic)
    productImage.src = activeColorData.imageSrc;
    productCodeSpan.textContent = activeColorData.productCode;
    productCodeSpan.style.color = activeColorData.color;
    
    // Immediately apply the active size to the new color
    updateForActiveSize();
  });
});

// Handle size selection clicks
sizeOptions.forEach(size => {
  size.addEventListener('click', () => {
    // Activate the selected size
    sizeOptions.forEach(s => s.classList.remove('active'));
    size.classList.add('active');
    
    // Update image and product code with the new size
    updateForActiveSize();
  });
});

// Core function to combine color + size and update elements
function updateForActiveSize() {
  const activeSize = document.querySelector('.header-module-sizes .size-option.active');
  if (!activeSize || !activeColorData.imageSrc) return;

  const sizeImageSuffix = activeSize.dataset.imageSuffix;
  const sizeCodeSuffix = activeSize.dataset.productCodeSuffix;

  // Update image URL (adjust this logic to match your actual image naming convention)
  // Example: If color image is "shirt-blue.jpg", size suffix "-large" becomes "shirt-blue-large.jpg"
  const imageParts = activeColorData.imageSrc.split('.');
  const imageBase = imageParts.slice(0, -1).join('.');
  const imageExt = imageParts.pop();
  const newImageSrc = `${imageBase}${sizeImageSuffix}.${imageExt}`;

  // Update image source and data attributes
  productImage.src = newImageSrc;
  productImage.dataset.size = activeSize.dataset.size; // Add size data to the image element for reference

  // Update product code with size suffix
  const newProductCode = `${activeColorData.productCode}${sizeCodeSuffix}`;
  productCodeSpan.textContent = newProductCode;

  // Keep the color from the active swatch (override with size-specific color if needed)
  productCodeSpan.style.color = activeColorData.color;
}

// Initialize with the default active size on page load
updateForActiveSize();

Key Notes for Customization #

• Image URL Logic: The example assumes your images use a suffix-based naming system. If your size-specific images have a different structure (e.g., separate folders like /images/small/), modify the newImageSrc generation to match your actual file paths.
• Data Attributes: Adjust the data-* attribute names if your existing code uses different conventions—just make sure they match between HTML and JavaScript.
• Edge Cases: The code includes checks for missing active elements to avoid errors if the DOM isn't fully loaded or elements are missing.

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