Показать/скрыть миниатюру в цикле

Question

В цепочке 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> 

JS:

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

Это не работают. Я нажимаю на ссылку «показать», но ничего не происходит. Вы можете мне помочь?

Answer 1

Не знаю - есть ли у вас одна функция toggle или набор функций toggle, оба случая не будут работать. Попробуйте это:

<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> 

И toggle функция должна быть одна только:

<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> 

Answer 2

К тому времени ваши обработчики событий запуска, страница полностью в браузере и не имеют доступа к PHP переменные, функции и т.д.

Итак, вам нужно JavaScript ссылки на toggleText и DisplayText для каждого элемента кликнули , Вот один из способов.

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);" 

Чтобы передать "текст" DOM ​​элемент в функции обработчика.

Обратите внимание, что все ваши атрибуты id не нужны, если вы используете эту технику.