Question

我正在构建一个单页的投资组合网站，其中有一个固定的垂直标题，我希望每个标题都突出显示，当我向下滚动到页面的相关部分时。

<div class="vert-nav">
        <ul>
            <li id="logo"><a id="home-link" href="#home-wrapper" ><img id="logowt" src="img/logo.png" alt="flamin_logo"/></a></li>

            <li><a id="about-link" href="#about-wrapper"><h6>About</h6></a></li>

            <li><a id="skills-link" href="#skills-wrapper"><h6>Skills</h6></a></li>

            <li><a id="work-link" href="#work-wrapper"><h6 class="work-heading">Work</h6></a></li>

        </ul>
    </div>

Jquery的

$(document).scroll(function(e){
var bound_top = $(this).scrollTop(),
    bound_bottom = bound_top + $(window).height();


$("#skills-wrapper").each(function(){


    if( 
        $(this).position().top + 300 <= bound_bottom &&
        $(this).position().top + $(this).height() >= bound_top
    ){
        $(".vert-nav a[href*='#skills-wrapper'] h6").css("color","#4d4d4d");

    }else{
        $(".vert-nav a[href*='#skills-wrapper'] h6").css("color","#BFBFBF");
    }
});
});

jquery代码按原样工作。但我不想继续重复每个部分的代码，而是想写一个函数，它将选择它所应用的元素的Id，例如。

$("#skills-wrapper").each(function(){

    var thisId = $(this).attr('id')

并用if，

替换if语句中的[href * ='＃skills-wrapper']的值

 $(".vert-nav a[href*='thisId'] h6").

所以代码看起来像这样，

$(document).scroll(function(e){
var bound_top = $(this).scrollTop(),
    bound_bottom = bound_top + $(window).height();


$("#skills-wrapper").each(function(){

    var thisId = $(this).attr('id')

    if( 
        $(this).position().top + 300 <= bound_bottom &&
        $(this).position().top + $(this).height() >= bound_top
    ){
        $(".vert-nav a[href*='thisId'] h6").css("color","#4d4d4d");

    }else{
        $(".vert-nav a[href*='thisId'] h6").css("color","#BFBFBF");
    }
});
});

但它不起作用！非常感谢您的帮助！谢谢！我希望这个问题足够清楚！

Answer 1

您的代码中的问题是您使用字符串"thisid"而不是变量thisId

要获得id，您可以this.id代替$(this).attr('id')（这也可以，但不需要）。

由于您匹配整个ID，因此最好使用attribute equals selector [href=<id>]而不是attribute contains selector [href*=<id>]

试试这个：

$(document).scroll(function(e){
    var bound_top = $(this).scrollTop(),
        bound_bottom = bound_top + $(window).height();   
    $("#skills-wrapper").each(function(){    
       var id = this.id;    
       if(
           $(this).position().top + 300 <= bound_bottom &&
           $(this).position().top + $(this).height() >= bound_top
         ) {
            $(".vert-nav a[href='#" + id + "'] h6").css("color","#4d4d4d");    
        } else {
            $(".vert-nav a[href='#" + id + "'] h6").css("color","#BFBFBF");
        }
    });
});

使用Jquery获取元素的Id，并将[href * ='＃']中的值替换为该Id

1 个答案: