如何基于JSON修改JS代码为DOM添加featured-block__item-active类

First, let's address the core issues and adjust the code to align with your JSON-based active class rule:

1. Update PHP in File.php (Critical Setup) #

We need to add data attributes to link images to their JSON IDs and pass the config to JavaScript:

<div class="wrapper" data-toggle-config='<?php echo json_encode(["toggle_multi_tiles" => $data->toggle_multi_tiles]); ?>'>
<?php if (in_array("1", $data->toggle_multi_tiles)) { ?>
<img class="featured-block__item" data-id="1" src="https://via.placeholder.com/400x300?text=picture%201" alt="">
<?php } ?>
<?php if (in_array("2", $data->toggle_multi_tiles)) { ?>
<img class="featured-block__item" data-id="2" src="https://via.placeholder.com/400x300?text=picture%202" alt="">
<?php } if (in_array("3", $data->toggle_multi_tiles)) { ?>
<img class="featured-block__item" data-id="3" src="https://via.placeholder.com/400x300?text=picture%203" alt="">
<?php } ?>
</div>

• Removed the hardcoded featured-block__item-active class (we'll set this via JS)
• Added data-id to each image to map to JSON values
• Added data-toggle-config to pass the full JSON config to JavaScript

2. Modified JavaScript Code #

Here's the fixed and updated JS, with comments explaining key changes:

// 1. Retrieve the JSON configuration from the wrapper's data attribute
const wrapper = document.querySelector('.wrapper');
const config = JSON.parse(wrapper.dataset.toggleConfig);
const tileIds = config.toggle_multi_tiles;

// 2. Map JSON IDs to their corresponding DOM images (follows config order)
const pics = tileIds.map(id => document.querySelector(`.featured-block__item[data-id="${id}"]`));
const lastPicIndex = pics.length - 1;

const transitionDuration = 800; // Matches CSS transition speed
const transitionDelay = 3000; // Time image stays active
const totalDelay = transitionDuration + transitionDelay;
const intervalDelay = (transitionDuration * 2) + transitionDelay; // Full cycle time

// 3. Set initial active state based on JSON's first element
pics.forEach(pic => pic.classList.remove('featured-block__item-active'));
pics[0].classList.add('featured-block__item-active');

function toggleClass() {
  // Find current active image and its position in our config-mapped array
  const activePic = document.querySelector('.featured-block__item.featured-block__item-active');
  const activeIndex = pics.indexOf(activePic);
  
  // Calculate next image index (wrap around to start if at end)
  const nextIndex = activeIndex === lastPicIndex ? 0 : activeIndex + 1;
  const nextPic = pics[nextIndex];

  // Trigger smooth transition
  setTimeout(() => activePic.classList.remove('featured-block__item-active'), transitionDelay);
  setTimeout(() => nextPic.classList.add('featured-block__item-active'), totalDelay);
}

// Start auto-rotation
setInterval(toggleClass, intervalDelay);

Key Changes Explained #

• Fixed Class Name Typo: Removed the duplicated featured-block__item-featured-block__item-active (a bug in the original code) and replaced it with the correct featured-block__item-active
• Config-Driven Initial State: The first image in the JSON toggle_multi_tiles array is set as active initially, overriding any hardcoded PHP classes
• Config-Followed Rotation: Rotation now follows the order of the JSON array (e.g., if JSON is ["2","1","3"], rotation cycles 2 → 1 → 3 → 2)
• Clean State Management: Ensures no duplicate active classes by clearing all active states before setting the initial one

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