在循環中顯示/隱藏縮略圖

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

它不工作。我點擊「顯示」鏈接，但沒有任何反應。你可以幫我嗎？

來源

2016-01-08 Marcin324

所以，你有一大堆的功能'toggle'，對不對？ –

是的。也許我應該將數字「我」添加到函數名稱。 – Marcin324

definetely你應該添加$我，但不是在函數名.. –

我不知道 - 無論你有一個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>

來源

2016-01-08 16:44:52

謝謝，它的作品！我將$ i添加到函數名稱;） – Marcin324

添加一個參數是一個__more__合理的方法。 –

通過你的事件處理程序運行時，頁面完全是在瀏覽器不能訪問到PHP變量，函數等

所以，你需要toggleText和displayText的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);"

到「文本」 DOM元素傳遞給處理函數。

請注意，如果您使用此技術，則不需要您所有的id屬性。

來源

2016-01-08 16:43:30 James

在循環中顯示/隱藏縮略圖

回答

相關問題