如何自动点击href元素实现尺码选择？求助有效实现方法

Let's break down how to automatically select your desired size based on the HTML snippet you provided. The key is targeting the right <a> element for Size 12 and triggering the site's selection logic.

Step 1: Identify the Correct Selector #

First, you need to pinpoint the exact element for Size 12. Based on your HTML, each size link has unique attributes you can use:

• By title attribute: Each link has a title like Size 07.5 — so Size 12 would likely be title="Size 12.0" (adjust if your site uses Size 12 without the .0).
• By text content: The visible text inside the link (e.g., 07.5, 08.0) — for Size 12, this might be 12 or 12.0.
• By value attribute: Similar to the title, the value attribute holds the size string.

Step 2: Code to Auto-Select the Size #

Here are a few reliable methods to trigger the selection:

Method 1: Target by title Attribute (Most Precise)

This works if the title attribute matches exactly what you're looking for:

// Wait for the page to load completely before running
document.addEventListener('DOMContentLoaded', function() {
  // Replace "Size 12.0" with your actual size's title
  const targetSize = document.querySelector('a[title="Size 12.0"]');
  
  if (targetSize) {
    // Simulate a user click
    targetSize.click();
    
    // If simple click doesn't work (some sites use custom events), try this:
    targetSize.dispatchEvent(new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
    }));
    
    // Optional: Add the "active" class if the site uses it to mark selected sizes
    targetSize.classList.add('active');
  } else {
    console.log("Size 12 not found — check if it's in stock or the title format is correct!");
  }
});

Method 2: Target by Visible Text Content

Use this if the title attribute isn't consistent, but the visible text is:

document.addEventListener('DOMContentLoaded', function() {
  // Get all in-stock size links
  const sizeLinks = Array.from(document.querySelectorAll('.grid_size.in-stock'));
  
  // Find the link with text matching "12.0" (adjust to your size's text)
  const targetSize = sizeLinks.find(link => link.textContent.trim() === '12.0');
  
  if (targetSize) {
    targetSize.click();
  } else {
    console.log("Size 12 is either out of stock or not listed!");
  }
});

Quick Test in Browser Console

If you want to test this immediately in your browser's DevTools Console, run this simplified version:

// Replace the selector with the one matching your size
const size12 = document.querySelector('a[title="Size 12.0"]');
size12?.click(); // The ? ensures it doesn't throw an error if the element doesn't exist

Key Notes to Troubleshoot #

• Double-check the size format: Your example uses 07.5 and 08.0, so Size 12 might be 12.0 (not just 12). Inspect the element in DevTools to confirm.
• Wait for the DOM to load: If you run the code too early (before the size list renders), it won't find the element. Using DOMContentLoaded or wrapping in a setTimeout (e.g., setTimeout(() => { /* code here */ }, 2000)) can fix this.
• Custom site logic: Some sites use additional events (like change or custom events) instead of just click. If click() doesn't work, check the site's event listeners in DevTools to see what triggers the selection.

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