如何在单个按钮上显示两个数值的可点击百分比？（HTML/CSS新手）

Hey there! Since you're new to HTML/CSS/jQuery, let's break this down step by step to get that clickable percentage working on your single button while keeping your existing applicant/position counts visible.

Key Goals We'll Cover: #

• Calculate the percentage of applicants relative to positions (with safe handling for 0 positions)
• Display the percentage as a clickable element inside your button
• Keep your original text styling intact
• Add a customizable click action to the percentage

Step 1: Basic HTML (No Changes Needed!) #

We'll stick with your existing button element—no need to modify the HTML structure:

<button type="button" id="btnInf"></button>

Step 2: jQuery Implementation with Clickable Percentage #

Here's the full working code, with comments explaining each part:

// Define your dynamic values (replace these with your actual data)
const numApplicants = 18;
const numPositions = 25;

// Calculate percentage safely (avoids division-by-zero errors!)
const applicantPercentage = numPositions > 0 
  ? Math.round((numApplicants / numPositions) * 100) 
  : 0;

// Build the button content with clickable percentage
const buttonContent = `
  <span style="color:black;font-size:12px">Number of Applicants:</span>
  <span style="color:black;font-size:23px">${numApplicants}</span>
  <br>
  <span style="color:brown;font-size:12px">Number of Positions:</span>
  <span style="color:brown;font-size:23px">${numPositions}</span>
  <br>
  <!-- Clickable percentage element with visual cues -->
  <span id="percentageClick" style="color:blue;font-size:18px;cursor:pointer;text-decoration:underline">
    ${applicantPercentage}% Applicants vs Positions
  </span>
`;

// Populate the button with your combined content
$("#btnInf").html(buttonContent);

// Add click functionality to the percentage
$("#percentageClick").on("click", function() {
  // Replace this with your desired action (e.g., show details, log data, etc.)
  alert(`Applicant percentage: ${applicantPercentage}% (${numApplicants}/${numPositions})`);
});

Important Details Explained: #

1. Safe Calculation: We check if numPositions is greater than 0 before dividing—this prevents JavaScript errors if there are no open positions.
2. Clickable Visual Cues: The percentage span uses cursor:pointer and text-decoration:underline to clearly signal to users it's interactive (tweak colors/size to match your design).
3. Preserved Original Styling: We kept your original font sizes and colors for the applicant/position counts so your existing design stays consistent.
4. Flexible Click Action: The current click event shows an alert, but you can replace that with any action you need—like opening a details panel, sending data to a server, or filtering a list.

Quick Customization Tips: #

• Use toFixed(1) instead of Math.round() if you want one decimal place (e.g., 72.0% instead of 72%).
• Adjust the percentage's style to match your brand—swap the blue color for your primary accent, or increase the font size for more visibility.
• For a more subtle clickable element, remove the underline and only change the cursor, or add a hover effect with CSS.

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