jQuery随机内容重复问题求助：点击仅替换对应div内容

Got it, let's fix that frustrating issue where clicking any "I am" link updates every div instead of just the one containing the clicked link. The root problem right now is your loadIam() function targets all .linkLoadIam elements' parent divs at once—we need to adjust it to only act on the specific div tied to the clicked link. Here's how to make it work:

Step 1: Ditch Inline JavaScript for Event Delegation #

Inline javascript: loadIam() calls don't let us reference the exact link that was clicked. Instead, we'll use jQuery's event delegation (perfect for dynamically loaded content) to handle clicks on .linkLoadIam links cleanly.

Step 2: Target Only the Parent Div of the Clicked Link #

Instead of selecting every .linkLoadIam element in the DOM, we'll use $(this) to grab the link that was just clicked, then find its parent div to update.

Updated Full Code #

JavaScript

/// Simple arrays with links in the middle
var listArray1 = [
    "<a class='linkLoadIam' href='#'>I am</a> engulfed",
    "This is how <a class='linkLoadIam' href='#'>I am</a> angry",
    "Just some <a class='linkLoadIam' href='#'>I am</a> sentimental",
];
var listArray2 = [
    "Phrase without links",
    "Phrase without links2",
    "Phrase without links3",
];
var listArray3 = [
    "Why <a class='linkLoadIam' href='#'>I am</a> hungry",
    "This is how <a class='linkLoadIam' href='#'>I am</a> eating",
    "Just some <a class='linkLoadIam' href='#'>I am</a> food phrase",
];

/////// Initial random load function
$('#js-random').click(function() {
    // Get random items from each array
    const getRandomArray1 = listArray1[Math.floor(Math.random() * listArray1.length)];
    const getRandomArray2 = listArray2[Math.floor(Math.random() * listArray2.length)];
    const getRandomArray3 = listArray3[Math.floor(Math.random() * listArray3.length)];
    
    // Load into respective divs
    $('.getRandomArray1div').html(getRandomArray1);
    $('.getRandomArray2div').html(getRandomArray2);
    $('.getRandomArray3div').html(getRandomArray3);
});

/// Array for "I am" link replacements
var listIam = [
    "<a class='linkLoadIam' href='#'>I am</a> the substitute",
    "This is how <a class='linkLoadIam' href='#'>I am</a> the phrase is changing",
    "Just some <a class='linkLoadIam' href='#'>I am</a> random project.",
];

/// Handle clicks on "I am" links (event delegation for dynamic content)
$(document).on('click', '.linkLoadIam', function(e) {
    e.preventDefault(); // Prevent default link behavior (no page jump)
    const randomIam = listIam[Math.floor(Math.random() * listIam.length)];
    // Update only the parent div of the clicked link
    $(this).closest('div').html(randomIam);
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="results">
    <div class="getRandomArray1div"></div>
    <div class="getRandomArray2div"></div>
    <div class="getRandomArray3div"></div>
</div>
<div id="js-random">
    <a href="#">RANDOM</a>
</div>

Key Changes Explained #

• Event Delegation: $(document).on('click', '.linkLoadIam', ...) ensures even dynamically loaded links (like those inserted after clicking "RANDOM") will trigger the handler—no need to rebind events every time content updates.
• Targeted Update: $(this).closest('div') finds the nearest parent div of the clicked link, so only that div gets a new random phrase from listIam.
• Cleaner Link Handling: We replaced href='javascript: loadIam();' with href='#' and added e.preventDefault() to avoid unwanted page jumps, making the code more maintainable.

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