开发JQuery投票组件遇问题：触发点击事件初始化默认值时误增票数

Hey there! Let’s work through those two frustrating problems with your poll component—no more weird jumps or accidental vote inflation. Here’s how to fix both while keeping the real-time voting functionality intact:

1. Eliminate the Initial Reverse Jump #

The jump happens because your component is animating from 0% width to your default percentage on load. To fix this, we’ll skip the initial animation by temporarily disabling transitions while setting the default state:

// Define your default vote counts first
const defaultVoteData = {
  optionA: 45,
  optionB: 35,
  optionC: 20
};

// Calculate total initial votes
const totalInitialVotes = Object.values(defaultVoteData).reduce((sum, votes) => sum + votes, 0);

// Initialize each poll option without animation
document.querySelectorAll('.poll-option').forEach(option => {
  const optionKey = option.dataset.option;
  const defaultPercent = (defaultVoteData[optionKey] / totalInitialVotes) * 100;

  // Disable transition to prevent jump
  option.style.transition = 'none';
  // Set default width and vote count directly
  option.style.width = `${defaultPercent}%`;
  option.querySelector('.vote-number').textContent = `${defaultVoteData[optionKey]} votes`;

  // Re-enable transition after initialization (force re-render with setTimeout)
  setTimeout(() => {
    option.style.transition = 'width 0.4s ease-in-out';
  }, 0);
});

By turning off transitions during setup, we set the default width instantly, then re-enable transitions so future user votes still animate smoothly.

2. Stop Accidental Vote Increments From Default Setup #

The issue with triggering click events to set defaults is that it runs your vote-counting logic for every option. Instead, directly update your data model and DOM without simulating user clicks:

// Handle real user votes separately
document.querySelectorAll('.poll-option').forEach(option => {
  option.addEventListener('click', () => {
    const optionKey = option.dataset.option;
    // Increment the vote count for the clicked option
    defaultVoteData[optionKey]++;
    const updatedTotal = totalInitialVotes + 1;

    // Update all options' percentages and counts
    document.querySelectorAll('.poll-option').forEach(opt => {
      const optKey = opt.dataset.option;
      const newPercent = (defaultVoteData[optKey] / updatedTotal) * 100;
      opt.style.width = `${newPercent}%`;
      opt.querySelector('.vote-number').textContent = `${defaultVoteData[optKey]} votes`;
    });
  });
});

This way, your default values are set statically on load, and only actual user clicks trigger the vote-increment logic. No more extra votes being added to every option!

Final Notes #

• Make sure your HTML elements have data-option attributes matching your vote data keys (e.g., <div class="poll-option" data-option="optionA">).
• Adjust the transition duration (0.4s ease-in-out) to match your desired animation speed.

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