Question

我正在建立一个行话破坏者＆＃39;它在顶部有一个行话术语列表，下面是每个术语的单独div，包含术语作为标题，以及其下面的解释。

我正在尝试编写一个函数，当您单击顶部的一个术语术语时，会找到该术语作为h3标题的div，并滚动到它。

我事先不知道这些术语是什么，所以不能依赖硬编码。某些术语实际上可能包含来自另一个术语的所有字母也是可能的 - 例如，一个术语可能是“知识产权”和“＃39;另一个可能是知识产权律师＆＃39;。所以函数需要找到完全匹配。

到目前为止，我已经设法编写了一个转换为小写的函数，并将点击的术语与同名的h3相匹配。我能解决的是如何使用它来滚动它。有没有人有什么建议？我完全可能错误地走这条路。

行话术语的示例列表：

<div class="jargonBusterDropDown">
    <div class="textWrapper">
        <p>attorney</p>
        <p>copyright</p>
        <p>chartered</p>
        <p>intellectual property</p>
        <p>intellectual property lawyer</p>
        <p>licensing</p>
    </div>
</div>

完整行话术语div的示例

        <div class="fullWidthContentCard jargonBusterCard">
            <div class="fullWidthContentCard__title">
                <h3>Attorney <i class="fa fa-chevron-down" aria-hidden="true"></i></h3>
            </div>
            <div class="fullWidthContentCard__content">
                <p>DESCRIPTION GOES HERE</p>
            </div>
        </div>

我的JS

$('.jargonBusterDropDown p').click(function(){
    var val = $(this).text().toLowerCase();
    var titles = [];
    $('.fullWidthContentCard__title h3').each(function(i, e){
        titles.push($(e).text().slice(0, -1).toLowerCase());
    });
    var elementToScrollTo = titles.filter(function(title){
        return val === title;
    });
    elementToScrollTo = elementToScrollTo.toString();
});

Answer 1

$('html, body').animate({scrollTop: $(object).offset().top}, 300 /*duration in milisec*/);

其中object是您找到的。如果你在每个（）函数中，你应该写this。

编辑：完整解决方案：

$(document).ready(function(){   
    $('.jargonBusterDropDown p').click(function(){
        var val = $(this).text().toLowerCase();
        console.log(val);
        $('.fullWidthContentCard__title h3').each(function(i, e){
            if($(e).text().slice(0, -1).toLowerCase().indexOf(val) >= 0) // val is found
            {
                console.log($(e));
                $('html, body').animate({scrollTop: $(e).offset().top}, 300 /*duration in milisec*/);
                return false; // Use this if you want to stop and scroll to the first object found. Otherwise you will scroll to the last.
            }
        });
    });
});

Answer 2

你想要找到要滚动到的元素，可以使用contains selector，注意区分大小写！

之后，它是一个简单的滚动到element.offset().top

检索到的元素的偏移量

＆＃13;

$('.jargonBusterDropDown p').click(function() {
  var val = $(this).text().toLowerCase();
  $('html, body').animate({
    scrollTop: $('.fullWidthContentCard__title h3:contains(' + val + ')').offset().top
  }, 2000);

});

＆＃13;

.jargonBusterDropDown {
  margin-bottom: 1000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jargonBusterDropDown">
  <div class="textWrapper">
    <p>attorney</p>
    <p>copyright</p>
    <p>chartered</p>
    <p>intellectual property</p>
    <p>intellectual property lawyer</p>
    <p>licensing</p>
  </div>
</div>

<div class="fullWidthContentCard jargonBusterCard">
  <div class="fullWidthContentCard__title">
    <h3>attorney <i class="fa fa-chevron-down" aria-hidden="true"></i></h3>
  </div>
  <div class="fullWidthContentCard__content">
    <p>DESCRIPTION GOES HERE</p>
  </div>
</div>

＆＃13;

jQuery - 根据文本内容动态查找并滚动到元素

2 个答案: