Question

我有以下代码。它可以在移动设备上运行，但由于某些原因，这让我感到困惑，它不能在桌面浏览器中工作。有什么想法吗？

<div class="top_nav_option_wrapper" 
  onclick="javascript:changePage('{{ shop.url }}{{ link.url }}','fade');">
  <a href="#" 
  onclick="javascript:changePage('{{ shop.url }}{{ link.url }}','fade');" 
  class="top_nav_option">{{ link.title }}</a><br>
</div>

功能

  // Function used to transition a page out and navigate to a new page
  function changePage(goToUrl, type, id) {
    alert('HEY');
    if (type == 'collection_flicker') {
        prodElements = ['prod1', 'prod2', 'prod3', 'prod4'];
        for (i = 0; i < prodElements.length; i++) {
            if (document.getElementById(prodElements[i]) != null && document.getElementById(prodElements[i]) != document.getElementById(id)) {
                document.getElementById(prodElements[i]).style.opacity = "0";
                document.getElementById(prodElements[i]).style.display = "none";
            }
        }
        flickerEffect('collection_exit', 15, 50);
        window.setTimeout(function () {
            window.location.href = goToUrl
        }, 1000);
    } else if (type == 'fade' && currentTemplate == 'collection') {
        document.getElementById('watermark').style.transition = '1s opacity';
        document.getElementById('watermark').style.opacity = '0';
        document.getElementById('productCollectionList').style.transition = '1s opacity';
        document.getElementById('productCollectionList').style.opacity = '0';
        window.setTimeout(function () {
            window.location.href = goToUrl
        }, 500);
    } else {
        window.location.href = goToUrl;
    }
  }

Answer 1

我建议进行以下更改 - 我不确定link.url是如何成为一种类型但你会看到这个想法

HTML：

<div class="top_nav_option_wrapper">  
<a href="{{ shop.url }}" 
  onclick="return changePage(this.href,'{{ link.url }}','fade');" 
  class="top_nav_option">{{ link.title }}</a><br>
</div>

脚本

// Function used to transition a page out and navigate to a new page
function changePage(goToUrl, type, id) {

  if (type == 'collection_flicker') {
    prodElements = ['prod1', 'prod2', 'prod3', 'prod4'];
    for (var i = 0; i < prodElements.length; i++) {
      var prodelem = document.getElementById(prodElements[i]);     
      if (prodelem != null && prodelem  != document.getElementById(id)) {
        prodelem.style.opacity = "0";
        prodelem.style.display = "none";
      }
    }
    flickerEffect('collection_exit', 15, 50);
    window.setTimeout(function () {
        window.location.href = goToUrl
    }, 1000);
    return false; // cancel link
  } else if (type == 'fade' && currentTemplate == 'collection') {
    document.getElementById('watermark').style.transition = '1s opacity';
    document.getElementById('watermark').style.opacity = '0';
    document.getElementById('productCollectionList').style.transition = '1s opacity';
    document.getElementById('productCollectionList').style.opacity = '0';
    window.setTimeout(function () {
        window.location.href = goToUrl
    }, 500);
    return false; // cancel link
  } 
  return true; // allow link
}

从div调用函数并且链接无法正常工作

1 个答案: