如何使用jQuery修改:after选择器及弹窗字母的背景颜色？

Hey there! Let's break down solutions to your two questions using your provided CSS and HTML as context:

问题1：如何使用jQuery通过:after选择器修改背景颜色？ #

First off, a quick heads-up: jQuery can't directly target pseudo-elements like :after because they aren't part of the actual DOM tree. But we have two solid workarounds to get the effect you want:

方法1：通过切换CSS类（最稳定） #

First, define an additional CSS class that overrides the background-color of your :after pseudo-element:

/* Your original CSS */
.map-button a.active:after {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 2px solid #000;
    background-color: #FFF;
    border-radius: 50%;
    margin-top: 2px;
}

/* New class to modify the background color */
.map-button a.active.custom-after-bg:after {
    background-color: #FF4500; /* Replace with your desired color */
}

Then use jQuery to add/remove this class to your target element:

// Add the class to change the :after background
$('.map-button a.active').addClass('custom-after-bg');

// To revert back, remove the class
// $('.map-button a.active').removeClass('custom-after-bg');

方法2：使用CSS变量（更灵活） #

If you want dynamic color changes without pre-defining classes, use CSS variables. Update your original CSS to use a variable for the background color:

.map-button a.active:after {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 2px solid #000;
    background-color: var(--after-bg-color, #FFF); /* #FFF is the default */
    border-radius: 50%;
    margin-top: 2px;
}

Then use jQuery to set the variable on the parent element:

// Change the :after background to blue
$('.map-button a.active').css('--after-bg-color', '#0066FF');

问题2：如何使用jQuery修改弹窗字母的背景颜色？ #

Based on your HTML structure, I'll cover two common scenarios:

场景1：修改按钮内的字母（.sr-only的"A"） #

If you're referring to the screen-reader-only "A" in your button's <span>, you can target it directly with jQuery:

// Set background color for the hidden letter
$('.map-button a span.sr-only').css('background-color', '#FFFF00');

场景2：修改弹窗内的字母（假设自定义弹窗） #

If you have a popup modal triggered by this button, you can modify the letter's background when the popup opens. Let's assume your popup has an ID of #letter-popup and the letter is in an element with class .popup-letter:

// Trigger when the button is clicked
$('.map-button a').click(function(e) {
    e.preventDefault(); // Prevent default link behavior
    
    // Update the popup letter's background color
    $('#letter-popup .popup-letter').css('background-color', '#32CD32');
    
    // Show the popup (adjust this to match your popup's show method)
    $('#letter-popup').fadeIn();
});

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