Question

我使用razor语法生成标签列表。

@foreach(var label in Model.Labels)
{
   @Html.Label(label, new  { id = "??" }) <br /> <br />
}

它呈现如下：

ITEM1

ITEM2

我必须在Jquery中做些什么才能提醒被点击的标签名称？

如果我给它一个静态Id，则click事件仅在第一个元素上触发，因为有多个标签具有相同的ID。

Answer 1

除非你真的想要/需要，否则你不必担心身份证。

您可以在视图中执行此操作：

    @foreach(var label in Model.Labels)
    {
       @Html.LabelFor(x => label, new  { @Class = "clickableLabel" }) <br /> <br />
    }

在jquery中：

    $(".clickableLabel").click(function ()
    {
        alert($(this).attr("name"));
    })

通过使用类，您可以在使用相同事件时单击多个标签。

Answer 2

您不需要每个标签的ID。这一切都取决于您的HTML结构。如果您的标签嵌套在另一个元素中，您可以将该父元素与ID一起使用，然后使用jQuery处理子标签：$('#divWithId').children('label').click(function(){})。

否则，正如所指出的，您可以使用类或data-属性来访问标签。

Answer 3

如果你有一个包裹所有标签的div，那么你可以使用jquery做类似下面的事情。

这是fiddle。希望这会有所帮助。

$(document).ready(function() {
    $('#labelContainer').children().on("click", function(){
                        alert($(this).text());                    
                        }); 
});


<div id="labelContainer">
    <label>test1</label>
    <label>test2</label>
    <label>test3</label>
</div>

Answer 4

您可以将标签本身用作ID。

@foreach(var label in Model.Labels)
{
   @Html.Label(label, new  { id = label }) <br /> <br />
}

如果这不保证唯一性，请在id的开头或结尾添加一些字符串。

Answer 5

选项1，使用data-* 剃刀：

@foreach(var label in Model.Labels)
{
   @Html.Label(label, new  { data_type = "myLableType" }) <br /> <br />
}

JavaScript的：

$(document).on('click', '[data-type="myLabelType"]', function() {
    alert($(this).html());
}

选项2，使用class - 类用于CSS样式而不是JS，但它可以工作：

剃刀：

@foreach(var label in Model.Labels)
{
   @Html.Label(label, new  { class= "myLableType" }) <br /> <br />
}

JavaScript的：

$(document).on('click', '.myLabelType', function() {
    alert($(this).html());
}

Razor ForEach，获得点击价值

5 个答案: