Question

我有一个幻灯片演示，其中的缩略图用html硬编码，并使用带有JavaScript的onclick事件来控制幻灯片的上一个和下一个按钮以及缩略图的单击。我动态地为wordpress切换了内容，但是由于currentSlide（n）是硬编码的，因此无法进行缩略图onclick事件。如何使我的currentSlide索引动态响应？这是我的代码 Php：

foreach($page_children as $page_children):
//Get Thumbnails ID from children pages
$children_thumbnail_ID= get_post_thumbnail_id($page_children);
//Get Thumbnail source
$children_thumbnail_image=wp_get_attachment_image_src($children_thumbnail_ID,'thumbnail');?>
<img class="thumbs" src="<?php ech0 $children_thumbnail_image[0];>"onclick="currentSlide(1)">
<?php endforeach; 
  };

JavaScript

<script>
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var thumbs = document.getElementsByClassName("thumbs");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < thumbs.length; i++) {
thumbs[i].className = thumbs[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
thumbs[slideIndex-1].className += " active";
}
</script>

我希望它不要太令人困惑，感谢您的帮助，我将不胜感激！也许还有另一种方法可以做到这一点？基本上我不使用插件，因为当幻灯片内容在正文中时，我需要在标题部分显示缩略图。另外，我正在使用子页面的特色图像，以在父页面的幻灯片中显示。有更好的方法吗？我对wordpress，php和javascript很陌生。

Answer 1

这很简单。唯一要做的就是在循环中添加一个整数。这是我为您更改的代码。

if (data.length > 0) {   
    let element2 ;        
    $.each(data, function (index, element) {
        Items += element + ",";
        element2 = element;
    });
    Items = Items.substr(0, Items.length - 1);
    var Values = { "Items": Items, "Element": element2 };
    NEIQC_Service.ConfirmApprovalML(Values).then(function () {
    });
}

Answer 2

好，我成功了。我在onClick中回显了整数，并将增量完全放在循环末尾，并且现在可以正常工作了！

$counter = 1;
    foreach($page_children as $children):
    <img class="thumbs" src="<?php echo $children_thumbnail_image[0];?>    
    "onclick="currentSlide(<?php echo $counter;?>)">
<?php $counter ++ ?>
<?php endforeach;

谢谢您的帮助！

如何将带有缩略图的硬编码滑块变成动态的

2 个答案: