Javascript 在循环中显示/隐藏缩略图

在wordpress循环中，点击链接时要进行缩略图切换

循环的一部分：

<?php $i++; ?>
        <?php $aktualnosc_meta = get_post_meta($aktualnosc->ID); ?>
            <div class="case_study_box col-md-4 col-sm-6 col-xs-12">
                <div class="case_study_img">
                    <a id="displayText-<?php echo $i; ?>" href="javascript:toggle();">show</a>
                    <div id="toggleText-<?php echo $i; ?>" style="display: none">
                        <a href="<?php echo get_permalink($aktualnosc->ID) ?>">
                        <?= get_the_post_thumbnail($aktualnosc->ID, 'full', []) ?>
                        </a>
                    </div>
                 </div>

当事件处理程序运行时，页面完全在浏览器中，无法访问PHP变量、函数等

因此，您需要javascript引用来切换每个单击项的文本和显示文本。这里有一条路

function toggle(text) {
    // text is the dom element that was clicked on
    var ele = text.parentNode.getElementsByTagName("div")[0];
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 

然后，您需要将onclick更改为：

href="javascript:toggle(this);"

将“text”dom元素传递给handler函数

请注意，如果使用此技术，则所有id属性都是不必要的。
我不知道-无论您有一个
切换功能还是一组
切换功能，这两种情况都不起作用。试试这个：

<div class="case_study_box col-md-4 col-sm-6 col-xs-12">
    <div class="case_study_img">
        <a id="displayText-<?php echo $i; ?>" href="javascript:toggle(<?php echo $i; ?>);">show</a>
            <div id="toggleText-<?php echo $i; ?>" style="display: none">
                <a href="<?php echo get_permalink($aktualnosc->ID) ?>">
                    <?= get_the_post_thumbnail($aktualnosc->ID, 'full', []) ?>
                </a>
            </div>
         </div>

所以，您有一系列的函数
切换
，对吗？是的。也许我应该在函数名中添加数字“i”。当然，你应该在函数名中添加$i，但不应该。添加参数是更合理的方法。
<div class="case_study_box col-md-4 col-sm-6 col-xs-12">
    <div class="case_study_img">
        <a id="displayText-<?php echo $i; ?>" href="javascript:toggle(<?php echo $i; ?>);">show</a>
            <div id="toggleText-<?php echo $i; ?>" style="display: none">
                <a href="<?php echo get_permalink($aktualnosc->ID) ?>">
                    <?= get_the_post_thumbnail($aktualnosc->ID, 'full', []) ?>
                </a>
            </div>
         </div>

<script type="text/javascript"> 
function toggle(idx) {
    var ele = document.getElementById("toggleText-" + idx);
    var text = document.getElementById("displayText-" + idx);
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>