2

我对 JavaScript / JQuery 非常陌生...我正在尝试创建一个标签，该标签类似于一个人在其 TO：Hotmail 中的文本字段（作为输入）中的电子邮件地址。

我正在寻找一种将字符串名称和字符串电子邮件传递给 JavaScript 函数的机制，该函数将产生一个标签（带有人名）以及铅笔图像（用于在鼠标悬停期间进行编辑）和 X（删除按钮） .

我怎么能创造这个？是否有我可以使用的 JQuery 插件来制作它，以便文本字段包含此动态标签，但最终用户可以单击 X（并删除它）和/或单击铅笔图像并查看 e-邮件地址并编辑它？

(1) 联系标签：

动态联系人标签

(2) 编辑联系人：

在此处输入图像描述

基本上，我想将姓名和电子邮件字符串传递给 JavaScript 函数，并提供以下标签：

(1) 函数 createDynamicLabel(String name, String email) {}

(2) 函数editDynamicLabel() {}

这是否需要一个包含两个图像的 div 标签（可以单击这些图像）？我似乎无法想象如何使用 HTML/CSS/JavaScript 创建这些动态标签...

任何帮助将不胜感激！

感谢您抽出时间来阅读。

4

1 回答 1

0

我不知道任何基于 jQuery 的插件。

如果我必须这样做，我会使用一些 html 元素对电子邮件地址进行分组，然后按类（viewMode 和 editMode）进行分组。

您可以制作一个$(emailSources).each()循环来输出 html 代码，如下所示：

<div id="emailsContainer">
    <div id="johndoe@aol.com" style="min-width:10px; float:left;">
        <span></span>
        <img class="viewMode" src="pathToPencil" onclick="EmailChangeToEditMode("johndoe@aol.com");" />
        <img class="viewMode" src="pathToDelete" onclick="EmailDelete("johndoe@aol.com");" />
        <input type="text" class="editMode" />
        <img class="editMode" src="pathToOkButton" onclick="EmailSaveChanges("johndoe@aol.com");" />
    </div>
    <div id="jane@aol.com" style="min-width:10px; float:left;">
        <span></span>
        <img class="viewMode" src="pathToPencil" onclick="EmailChangeToEditMode("jane@aol.com");" />
        <img class="viewMode" src="pathToDelete" onclick="EmailDelete("jane@aol.com");" />
        <input type="text" class="editMode" />
        <img class="editMode" src="pathToOkButton" onclick="EmailSaveChanges("jane@aol.com");" />
    </div>
</div>

这些是javascript函数：

function EmailChangeToEditMode(containerId) {
$(containerId).find(".viewMode").hide(); // this will hide all the elements of the ViewMode
$(containerId).find(".editMode").show(); // this will show all the elements of the EditMode
}

function EmailDelete(containerId) {
$(containerId).remove(); // removes from the DOM
}

function EmailSaveChanges(containerId) {
var newEmail = $(containerId).find("input[class='editMode'][type='text']").value; // gets the new Email Address typed from the user
$(containerId).find("span").text(newEmail) // sets the new email address that will be showed
$(containerId).find(".viewMode").show();
$(containerId).find(".editMode").hide();
}

基本上，您正在为电子邮件地址（div）使用容器。然后你有编辑模式和查看模式的 html 元素。javascript代码正在使用 hide(); 和显示（）；处理你想做的事情。

您还必须在生成 html 代码时隐藏所有 editMode 元素（它以 viewMode 元素开头）。您还必须在 span 上设置当前电子邮件地址的文本。

此代码可能无法 100% 工作，因为我在没有测试的情况下编写了此代码

于 2011-08-09T15:57:00.437 回答