根据PHP中的类更改URL

时间：2019-01-29 06:29:03

标签： javascript php wordpress

这很不寻常，但是我有一个客户想要更改滚动显示的主要徽标。一个徽标在顶部，第二个徽标在滚动条上。

我已经设法通过使用图像来通过CSS实现徽标的可见更改，然后滚动隐藏图像并使用:: before伪类（第二个徽标是基于文本的）。

但是问题是我需要根据类更改菜单php文件中的url，因为两个徽标需要分开使用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 输出徽标的主题文件中的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)).'">';

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

目前，这是将徽标从图像更改为文本的方法：

.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;
}

2 个答案:

答案 0 :(得分：4)

答案说明了如何根据OP的要求完成所需的最终结果：

  

我要么需要更改滚动条上的网址，要么，   找到一种方法来添加php以添加2个徽标，然后将每个徽标隐藏在适当的滚动点上。

URL被认为是锚链接（<a href=""/>），因为OP宣称不希望更改徽标图像url。

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

方法A： 找到一种添加php的方法，以添加2个徽标，然后将每个徽标隐藏在适当的滚动点上

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

$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)).'">';

这种方法的另一个好处是可以由浏览器预先渲染，从而防止徽标元素转换发生时对较慢系统的延迟。

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： 更改滚动网址（使用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 +滚动间谍类

要以滚动间谍的身份运行，而是监听类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）。

答案 1 :(得分：0)

您可以在页面中使用以下代码来更改图像。

$(document).ready(function(){
    $( window ).scroll(function() {
    //change image css in here when scrolling
    if ($(window).scrollTop()==0) {
        //here you can set the initial logo when the screen comes back to the top
    }
      });
});
相关问题
最新问题