Question

（Dr.Nick）

我对JavaScript很陌生，但仍然在尝试使用asp.net EF JavaScript构建网站等等......

我已经根据我在数据库中的信息生成了链接，我希望该链接的名称出现在我的文本框中，但是从这张图片中可以看出，无论我按什么链接，我都会得到实体... （如果我按下alfk我得到实体）。

我的链接生成如下（对于数据库中的每个条目）：

<span>
  <a id="myLink" title="tagLink" value = @i.ID
    href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">@i.Name</a>
</span>

我的JavaScript看起来像这样：

$( '#myLink' ).click(function () { MyFunction(); return false; });
function MyFunction() {
    document.getElementById( 'textTemp' ).value += document.getElementById( 'myLink' ).text + " ";
}

我们都可以看到问题...所有我的链接都有相同的ID因此javascript将采用第一个...但是我该如何解决这个问题呢？

Answer 1

不要使用id来捕获动态内容，请使用以下类：

<table data-model="video">
    <tbody>
        {% for item in pending_videos %}
        <tr data-id="{{item.id}}" data-type="{{item.type}}" data-file="{{item.video_file}}">
            <td style="text-align:center">
                <button type="button" class="preview-vid btn btn-md btn-default" data-toggle="modal" data-target="#preview-window" >
                    <i class="fa fa-play"></i>
                </button>
                <button type="button" class="approve-vid btn btn-md btn-success">
                    <i class="fa fa-check"></i>
                </button>
                <button type="button" class="delete-vid btn btn-md btn-danger">
                    <i class="fa fa-times"></i>
                </button>
            </td>
            <td class="editable-column" data-type="input">{{item.title}}</td>
            <td class="editable-column" data-type="textarea">{{item.description}}</td>
            <td>{{item.upload_date|date('m/d/Y')}}</td>
            <td>
                <select class="cat-opts select-onload video-category" data-selected="{{item.videocategory_id}}" autocomplete="off">
                {{category_options|raw}}
                </select>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

管理js或html中的click事件，而不是两者。然后选择特定的点击元素使用$（this）

<span>
  <a class="myLinks" title="tagLink" value=@i.ID
    href="PleaseEnableJavascript.html" >@i.Name</a>
</span>

Answer 2

您指定两次onclick事件。来到这里：onclick="MyFunction();return false;"和jQuery一次：$('#myLink').click(function () { MyFunction(); return false; });你应该只使用其中一个，我建议使用后者。

您应始终为您的元素提供唯一ID。 myLink显然不是唯一的。幸运的是，你旁边有一些独特的东西：@i.ID。为什么不组合这些值，以便获得myLink1，myLink2，myLink3等。

更改这些ID会破坏jQuery选择器$('#myLink')。最好的方法是在你的a-tags中添加一个类，并将其用作选择器。

最后，您希望您的函数知道要检索的值。您可以通过读取传递给click事件的事件数据来完成此操作。这是一个答案，显示了如何做到这一点：Getting the ID of the element that fired an event

Answer 3

解决了！

这是一个解决方案。

<a id="myLink @i.ID" title="tagLink" value=@i.ID href="Index.html" >@i.Name</a>

JavaScript：

$(document).ready(function () {
        $(".someIdentifier .a").click(function (event) {
            document.getElementById('textTemp').value += $(this).text() + " ";
            return false;
        });
    });

如何区分自动生成的链接与JavaScript？

3 个答案: