Hey there! Let's work through getting your jQuery + JSON multi-language site up and running without relying on key attributes. I’ve got some actionable fixes and debugging tips based on common pitfalls with this approach:

1. Use Custom data-* Attributes (Instead of key) #

The most straightforward replacement for key attributes is to use valid HTML5 custom data attributes (like data-translate or data-lang-key). This keeps your markup semantic and avoids conflicts with any reserved attributes.

Example Markup: #

<!-- Replace <p key="welcome">Welcome</p> with -->
<p data-translate="welcome">Welcome</p>
<h2 data-translate="services">Our Services</h2>

Corresponding jQuery Logic: #

function switchLanguage(languageCode) {
  // Load your JSON language file (adjust path as needed)
  $.getJSON(`/${languageCode}.json`, function(translations) {
    // Target all elements with the custom data attribute
    $('[data-translate]').each(function() {
      const translationKey = $(this).attr('data-translate');
      // Replace text if the key exists in the JSON
      if (translations[translationKey]) {
        $(this).text(translations[translationKey]);
      }
    });
  });
}

// Trigger language switch (e.g., on button click)
$('.lang-btn-fr').click(function() {
  switchLanguage('fr');
});

2. Match Translations by Original Text (No Extra Attributes At All) #

If you want to avoid any custom attributes entirely, you can map translations using the element's original text as the key. Just make sure your original text is unique across elements to avoid mismatches.

Example Markup (no extra attributes): #

<h1>Welcome to Our Platform</h1>
<p>Get started with a free trial today!</p>

JSON Translation File (e.g., fr.json): #

{
  "Welcome to Our Platform": "Bienvenue sur notre plateforme",
  "Get started with a free trial today!": "Commencez avec un essai gratuit dès aujourd'hui !"
}

jQuery Logic: #

function switchLanguage(languageCode) {
  $.getJSON(`/${languageCode}.json`, function(translations) {
    // Target elements you want to translate (use a class like .translatable to narrow it down)
    $('.translatable').each(function() {
      const originalText = $(this).text().trim();
      // Replace text if a match exists in the JSON
      if (translations[originalText]) {
        $(this).text(translations[originalText]);
      }
    });
  });
}

Note: This method requires exact matches (including spaces, punctuation, and capitalization) between your HTML text and JSON keys. It’s less flexible but great for simple sites.

3. Debug Your Current Broken Code #

Since you’ve already modified your code without success, here are the most common issues to check:

• Incorrect Selectors: If you swapped out [key] for a new selector (like a class or data attribute), verify it’s targeting the right elements. Run $('your-selector-here') in your browser’s console to see if it returns the elements you expect.
• Mismatched JSON Keys: Double-check that the identifier you’re using (e.g., data-translate value) exactly matches the keys in your JSON file. Typos are the #1 culprit here!
• AJAX Failures: Check your browser’s Network tab to confirm the JSON file is loading correctly. If you’re testing locally, you might run into CORS issues—use a local server (like Live Server in VS Code) instead of opening the HTML file directly.
• Wrong Text Replacement Method: If you’re using html() instead of text() and your translations don’t include HTML, you might be introducing unexpected issues. Stick with text() for plain text translations.

Quick Debugging Tip #

Add console.log() statements inside your .each() loop to verify what’s happening:

$('[data-translate]').each(function() {
  const key = $(this).attr('data-translate');
  console.log(`Checking key: ${key}, Translation value: ${translations[key]}`);
});

This will show you if your code is picking up the right keys and finding matching translations.

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