Question

以下是我的html代码：

<div class="code">
    <declaration class="2">
        toto
    </declaration>
    <identifier class="2">
        toto
    </identifier>
    <identifier class="3">
        toto
    </identifier>
    <identifier class="2">
        toto
    </identifier>
</div>

这是我的javascript：

function gotoDeclaration(){
    $(".code identifier").click(function goto() {
        var list = document.getElementsByClassName($(this).attr('class'));
        for (var i = 0; i < list.length; i++) {
            if (list[i].nodeName === 'declaration')
                $('html, body').animate(
                    {scrollTop: list[i].offset().top}, 
                    'fast');
            return false;
        }
    });
}

我想做的是，如果我在带有标签名称标识符的元素上进行clic，它会滚动到带有标签名称声明的元素，与标识符元素具有相同的类。

当我陈词滥调时没有任何事情发生。

在其他一些工作函数之后调用该函数：

$(document).ready(function(){
gotoDeclaration();
highlightIdentifiers();
expandCollapse();
});

Answer 1

执行$('html, body').animate( {scrollTop: list.eq(i).offset().top}, 'fast');返回HTML元素。问题是您正在使用jQuery函数：function gotoDeclaration(){ $(".code identifier").click(function goto() { var list = $('declaration.'+$(this).attr('class')); $('html, body').animate( {scrollTop: list.offset().top}, 'fast'); }); }。

要解决此问题，请改用.eq：

var query = client.CreateDocumentQuery<Dictionary<string, object>>(collectionLink)
.Where(c => (string)c[propertyName] == propertyValue);

Dictionary<string, object> documentAsDictionary = query.AsEnumerable().FirstOrDefault();
Document document = JsonConvert.DeserializeObject<Document>(
    JsonConvert.SerializeObject(documentAsDictionary));

还有一种更好的方法来编码。由于jQuery已经加载，请使用它！

{{1}}

Answer 2

为什么要尝试遍历所有元素？你不需要所有这些只是为了一个简单的任务。

试试这个：

function gotoDeclaration(){
    $(".code identifier").click(function goto() {
        var $dec = $('declaration.'+$(this).attr('class'));
        $('html, body').animate({scrollTop: $dec.offset().top}, 'fast');
    });
}


$(document).ready(function(){
  gotoDeclaration();
});

identifier,
declaration { height:400px; display:block; }
identifier { background-color:lightblue; cursor:pointer; }
declaration { background-color:lightgreen; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="code">
    <declaration class="2">
        declaration 2
    </declaration>
    <identifier class="2">
        identifier 2
    </identifier>
    <declaration class="3">
        declaration 3
    </declaration>
    <identifier class="3">
        identifier 3
    </identifier>
</div>

滚动到具有特定类

2 个答案: