javascript - 根据php中的类更改url

标签 javascript php wordpress

这很不寻常，但我有一位客户想要更改滚动上的主要 Logo 。一个 Logo 位于顶部，第二个 Logo 位于滚动条上。

我成功地通过 CSS 实现了 Logo 的可见更改，方法是使用图像，然后在滚动时隐藏图像并使用::before 伪类(第二个 Logo 是基于文本的)。

但是问题是我需要根据类更改菜单 php 文件中的 url，因为两个 Logo 需要转到单独的 URL。

不幸的是我不知道如何编写 php。

我找到了相关的 php 文件并尝试将其编辑为:

$logoDiv = '<a href="https://www.link1.com" target="_blank" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';

$logoDiv = '<a href="https://www.www.link2.com" target="_blank" class=".window-scrolled"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';

这不起作用，我认为它可能更像是一个“if/else”语句，但我现在不知道如何完成它。

编辑:为了澄清这一点，我正在尝试找出如何更改滚动图像的 href 目标。为了清楚起见，我想您可以将其视为同一张图像，因为一个是另一个的伪图像。

任何帮助都会很棒。

编辑 #2 输出 Logo 的主题文件中的 php 是这样的 

$logoDiv = '<a href="'.esc_url( home_url( get_current_blog_id(), '/' ) ).'" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';
        $logoDiv = '<a href="https:url-1.com" target="_blank" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';

我在滚动上隐藏图像，但显示一个带有文本内容的伪类(我需要显示的第二个 Logo 实际上只是文本) - 所以它的行为就像一个元素。我要么需要更改滚动上的 url，要么找到一种方法来添加 php 以添加 2 个 Logo ，然后在适当的滚动点隐藏每个 Logo 。

目前，这是我将 Logo 从图像更改为文本的方法:

.logo-image.logo-skinnable img {
    opacity: 1;
    transition: opacity 900ms;
}

.window-scrolled .logo-image.logo-skinnable img {
    opacity: 0;
    transition: opacity 900ms;
}


.logo-image.logo-skinnable::before {
    font-size: 29px !important;
    font-family: "Poppins";
    content: 'word logo';
    opacity: 0;
    transition: opacity 700ms;
    position: absolute;
    top: 38px;
}

最佳答案

答案演示了如何根据 OP 要求实现所需的最终结果:

I either need to change the url on scroll OR, find a way to add php to add 2 logos, and then hide each one at the appropriate scroll points.

URL 被认为是 anchor 链接 ( <a href=""/> )，因为 OP 声明不希望更改 Logo 图像 url。

根据我的评论，我建议在页面上同时渲染两者，并使用 css 规则使用 display:none 隐藏第二个 Logo 。 。这将使其在初始加载时不可见。然后，您可以使用 jQuery 跟踪滚动位置并在两个 Logo 元素之间交换 css 规则，隐藏第一个并随后显示第二个。或者，您也可以根据需要使用绝对定位、z-index 和不透明度，以实现滚动过程中 Logo 过渡的淡入淡出效果。

方法A: 找到一种方法，通过php添加2个 Logo ，然后在适当的滚动点隐藏每个 Logo

您应该能够通过组合 PHP $logoDiv 中的元素来呈现模板中的两个 Logo 。变量。

$logoDiv = '<a href="https:url-1.com" target="_blank" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">Logo Text</a>
<a href="'.esc_url( home_url( get_current_blog_id(), '/' ) ).'" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'">';

此方法的另一个好处是可以由浏览器预渲染，从而在 Logo 元素转换发生时防止较慢的系统出现延迟。

jQuery(function($) { //same as $(document).ready()
    var logos = $('.scroll-logo');
    $(window).on('scroll', function(e) {
        if ($(this).scrollTop() === 0) {
            $(logos[0]).addClass('hidden');
            $(logos[1]).removeClass('hidden');
        } else {
            $(logos[1]).addClass('hidden');
            $(logos[0]).removeClass('hidden');
        }
    });
});
.scroll-logo.hidden {
  display: none;
}

/* below rules are for demo purposes only */

div {
  position: fixed; 
}

body{
  height: 8000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
    <!-- <?php echo $logoDiv; ?> -->
    <a href="https:url-1.com" class="scroll-logo hidden">
      Logo Text
    </a>
    <a href="//chrome.google.com" class="scroll-logo">
      <img src="//www.google.com/chrome/static/images/chrome-logo.svg" alt="Google Chrome"/>
    </a>
</div>

正如您所说，您想要更改元素的 href 属性，因此也可以使用类似的滚动技术来更改元素属性。允许您使用 data属性以指定要更改为的 URL。

方法 B: 更改滚动时的 URL(使用 data-url 属性)

$logoDiv = '<a href="'.esc_url( home_url( get_current_blog_id(), '/' ) ).'" class="navbar-brand"' . $data_padding_shrink . ' data-minheight="'.(($LOGO->logo_min == "") ? "20" : esc_attr($LOGO->logo_min)).'" data-url="https:url-1.com">';


jQuery(function($) { //same as $(document).ready()
    var logo = $('[data-url]');
    var newHref = logo.data('url');
    var originalHref = logo.attr('href');
    $(window).on('scroll', function(e) {
        if ($(this).scrollTop() === 0) {
            logo.attr('href', originalHref)
                .removeClass('hide_logo');
        } else {
            logo.attr('href', newHref)
                .addClass('hide_logo');
        }
    });
});
a.hide_logo img {
   display: none;
}

a.hide_logo:before {
    content: "Logo Text";
}

/* below is for demo purposes only */

div {
  position: fixed; 
}

body {
  height: 8000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
   <!-- <?php echo $logoDiv; ?> -->
    <a href="//chrome.google.com" data-url="https:url-1.com">
      <img src="//www.google.com/chrome/static/images/chrome-logo.svg" alt="Google Chrome"/>
    </a>
</div>

方法B + Scroll-Spy 类

作为滚动 spy 运行，监听类 window-scrolled相反，您只需使用 hasClass 而不是检查 scrollTop 的位置。更改logo.hasClass到添加了类的适当元素。

jQuery(function($) { //same as $(document).ready()
    var logo = $('[data-url]');
    var newHref = logo.data('url');
    var originalHref = logo.attr('href');
    var scrollSpy = null;
    $(window).on('scroll', function(e) {
        if (null !== scrollSpy) {
            //cancel previous delay
            window.clearTimeout(scrollSpy);
        }
        //delay scrollSpy to ensure class is not added after checking
        scrollSpy = window.setTimeout(function() {
            if (!logo.hasClass('window-scrolled')) {
                logo.attr('href', originalHref);
            } else {
                logo.attr('href', newHref);
            }
        }, 250); //adjust timeout as desired
    });


    //--- demo purposes only (DO NOT USE BELOW) ---
    $(window).on('scroll', function(e) {
        if ($(this).scrollTop() === 0) {
            logo.removeClass('window-scrolled');
        } else {
            logo.addClass('window-scrolled');
        }
    });
});
a.window-scrolled img {
   display: none;
}

a.window-scrolled:before {
    content: "Logo Text";
}

/* below is for demo purposes only */

div {
  position: fixed; 
}

body {
  height: 8000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
   <!-- <?php echo $logoDiv; ?> -->
    <a href="//chrome.google.com" data-url="https:url-1.com">
      <img src="//www.google.com/chrome/static/images/chrome-logo.svg" alt="Google Chrome"/>
    </a>
</div>

或者您也可以使用$('.window-scrolled').length === 0确定是否有任何元素具有该类，或指定 window-scrolled 的所需元素父级像这样$('[selector] .window-scrolled') (将 [selector] 替换为所需的父元素选择器，即 div.wrapper )。

关于javascript - 根据php中的类更改url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54415068/

上一篇：javascript - 如何在 React 中使用 material-UI 在 onFocus 事件的文本字段中选择部分文本？

下一篇：javascript - 等待从storageArea收集数据

相关文章：

javascript - 我如何将 Bunyan 与 Deepstream.io 一起使用？

php - 使用 json_encode 将数组从 PHP 传递到 JavaScript 显示空值

css - 在边框内缩放和旋转图像

phpMyAdmin - mySQL - 将数据导入 WordPress 时出错 - 什么是排序规则？

javascript - TypeError XXX 不是 NodeJS 中的函数

javascript - Angular 分页

php - 使用ajax在php中选择日期来获取数据

php - mysql_connect 问题，资源类型 'Unknown'

wordpress - 将 wordpress 安装移动到本地主机

javascript - 使用 jQuery 创建 PHP 友好的复选框数组

©2024 IT工具网  联系我们