编辑：

Question

我试图获取同一对象在不同位置的位置，在这里，使用javascript函数，我应该获得不同的顶部位置，但这不是这种情况。脚本代码：

<script type="text/javascript">
    window.ShowAlert = function myFunction(element) {   
    console.log("Hello World.");
    alert(element.offsetTop);
   }
</script>

Index.razor代码：

@inject IJSRuntime jsRuntime

<div>
    @for (int i = 0; i < 10; i++)
    {
        <div @onclick="MemberFunction" @ref="memberRef">Click Here</div>
    }

</div>

@code {

    private ElementReference memberRef;
    void MemberFunction()
    {
        jsRuntime.InvokeAsync<object>("ShowAlert", memberRef);
    }
}

您可以在这里看到Im在同一个div中做一个for，他在那行。我想要的是每发布一个div，它应该给我一个不同的offsetTop值，因为他是一个一行地往下走。我该如何解决这个问题？

在这里，为了更好地理解，您有一个演示https://blazorfiddle.com/s/4g57o82k。正如您在演示中看到的那样，每个点击此处的值都相同。

感谢您的关注。

Answer 1

编辑：

我认为这是一个错误，因此我创建了issue。如果这不是问题或得到解决，我将在这里更新。

看着docs about lambda expressions

请勿在lambda表达式中直接在i循环中使用循环变量（for）。否则，所有lambda表达式都会使用相同的变量，从而导致i的值在所有lambda中都相同。始终将其值捕获到局部变量（在上一示例中为buttonNumber）中，然后使用它。

因此，我们着眼于问题和answer it was given进行了一些调整，设法使其正常工作。

您需要在for内定义一个新的变量，以保存i的值。

@inject IJSRuntime jsRuntime

<div>
    @for(var i = 0; i < memberRef.Count(); i++)
    {
        var i2 = i;
        <div @onclick="() => MemberFunction(i2)" @ref="memberRef[i2]">Click Here</div>
    }
</div>

@code {

    private ElementReference[] memberRef { get; set; } = new ElementReference[11];
    void MemberFunction(int i)
    {
        jsRuntime.InvokeAsync<object>("ShowAlert", memberRef[i]);
    }

}

这里是工作中的fiddle。

在for循环中使用@ref获取元素引用

1 个答案:

编辑：