Question

我正在处理的网站需要有动态标签，例如：如果网页列出了特定图书的作者（有多位作者），它将如下所示： Author 1: Nikola Tesla [Remove] Author 2: Elon Musk [Remove] Author 3: Alan Turing [Remove]

（请注意，在这种情况下，[Remove]是一个将特定人员删除为作者的按钮。）

我的问题是这个，让我们说我删除了伊隆马斯克作为作者，图灵的标签现在应该改变以反映（将成为Author 2）。

我使用客户端JavaScript尝试了几个不同的东西（因为解决方案需要在不刷新页面或任何回发的情况下工作）但我自己无法接近工作解决方案，我的逻辑似乎由于我在网络开发方面缺乏经验而被关闭或限制..我还没有完成很多Web开发，所以我真的在学习，因为我要去。该解决方案还需要在用户向书中添加新作者的情况下工作。

编辑：作者不是存储在表格中，而是仅使用标签列出。这（由于我无法控制的事情）无法改变。

编辑2：以下是我认为相关的代码，如果需要其他任何内容，请告诉我 <div ID='dvAuthor" + i.ToString + "' class='form-group'><div class='col-sm-4 control-label'>

一个额外的转折是，它在服务器端，并在添加作者时替换占位符（这意味着当添加作者该页面确实刷新时 - 这很好，但删除不应该要求相同）。更有趣的是我们不使用JQuery！

i.ToString只是一个添加的整数，以便作者的ID编号，ex dvAuthor0，依此类推。

编辑3：回复@Basic

好的，这可以解决一些问题。作者标签的div来自服务器（即每次添加作者页面刷新，客户端现在都有新添加的作者。）所以我想我的问题是，我将如何在客户端上遍历div，或者甚至更好地遍历每个作者的div，如果我不确切地知道有多少，我可以抓住他们的ID作者在页面上？它会是这样的while(hasNextAuthor) {add author ID to array}抱歉所有的问题，我对Web Dev的新东西很新，我正在努力。

另外，我不需要担心从网页上删除作者，我有一个功能已经完成（在客户端和服务器上）。编号是唯一需要完成的事情，它实际上只是装饰性的，当前的编号系统工作正常但不会在用户删除作者时动态更改编号，而是等到用户选择保存然后重新加载页面编号正确。

编辑4：我认为我有办法完成这项任务，我只有一个挂机...如何从客户端获取网页上的作者数量？他们是JavaScript的一种方式，我可以循环查看为网页创建了多少div？

Answer 1

有些库可以通过JavaScript进行模板化。淘汰赛是一个很好的，你可以在这里了解更多： http://knockoutjs.com/documentation/template-binding.html ......并在这里看到一个很好的例子： https://www.devbridge.com/articles/knockout-a-real-world-example/

使用Knockout，您基本上可以创建一个客户端ViewModel和一个可观察的作者数组。然后，它们可以绑定到模板HTML UI，它与ViewModel交互，直到将其保存回来。

使用该库时，重新绑定应该没什么问题。

Answer 2

原始JQuery解决方案

您可以使用带有奇数索引的数组并绑定它。这样就可以解释丢失的索引。

There is an older stackoverflow article here that answers your question.

相当于指定每个元素的索引以及输入值：

<input type="hidden" name="Author.Index" value="3" />

如果你纯粹想要使文字漂亮，你可以做到：

<div id="author_1" class="author-container">Author <span class="authors" data-index="1">1</span>: First Last <a ..>[Remove]</a></div>

然后在JavaScript中，您可以执行(Assuming JQuery)：

function UpdateIndexes()
{
   var idx = 1;
   $(".authors").each(function(el){
      $(this).text(idx);
      idx++;
   });
}

$(function(){
    $(".whateverRemoveSelector").on("click", function(){
      $(this).parents(".author-container").remove();
      UpdateIndexes();
   });
})

Just JavaScript Solution

我试图保持变量名称香草足以让这个易于理解。这既可以从作者的数组创建，也可以连接remove事件，也可以重新编号作者。

希望这能解决你需要做的事情！

＆＃13;

var authors = [
  { Name: "J.K. Rowling" },
  { Name: "Orson Scott Card" },
  { Name: "Stephen King" },
  { Name: "Nicholas Sparks" }
];

/*
<div ID='dvAuthor" + i.ToString + "' class='form-group'><div class='col-sm-4 control-label'>
*/

function Remove(){
  var e = event.target.parentNode.parentNode;  
  e.parentNode.removeChild(e);
  
  var numbers = document.getElementsByClassName("sel-author-number");
  for(var i = 0; i < numbers.length; i++){
    var number = numbers[i];
    number.innerHTML = i+1;
  }
}

window.onload = function(){
  var authors = [
    { Name: "J.K. Rowling" },
    { Name: "Orson Scott Card" },
    { Name: "Stephen King" },
    { Name: "Nicholas Sparks" }
  ];
  
  var e = document.getElementById("authorsContainer");
  for(var i = 0; i < authors.length; i++){
    var container = document.createElement("div");
    var author = document.createElement("div");
    var authorNumber = document.createElement("span");
    authorNumber.setAttribute("class", "sel-author-number");
    authorNumber.appendChild(document.createTextNode((i+1)));
    container.setAttribute("class", "form-group");
    var authorID = "author" + (i+1);
    container.setAttribute("id", authorID); 
    author.setAttribute("class","col-sm-4 control-label");
    author.appendChild(authorNumber);
    author.appendChild(document.createTextNode(": " + authors[i].Name));
    var removeLink = document.createElement("span");
    removeLink.appendChild(document.createTextNode("[Remove]"));
    author.appendChild(removeLink);
    container.appendChild(author);
    
    e.appendChild(container);
    removeLink.onclick = function(){
      Remove();
    };
  }
};

＆＃13;

<div id="authorsContainer"></div>

＆＃13;

Answer 3

您有两个不同的问题;

管理作者列表（可能带有ID）
显示编号列表

对于第一部分，有一个或多个数组，并使用js来添加/删除。如果您不熟悉该技术，请参阅this answer。当对该阵列进行任何更改时，请调用第二个＆＃34;更新屏幕＆＃34;清除保留作者的<div>并重新创建其内容的函数。

您的update()函数可能如下所示：

//Add and remove from authors as you wish, then call update()
var authors = ['Bob', 'Sue'];

function update() {
    var container = document.getElementById('Authors');

    //clear the container, open a list
    container.innerHTML = "<ul>"

    //Recreate the contents...
    for(var i = 0; i < authors.length; i++) {
        //Add the author
        container.innerHtml += '<li>' + i + '. ' + authors[i] + '</li>';
    }

    //Close the list
    container.innerHTML += "</ul>"
}

当然，如果你正在使用jQuery，这个代码可以被大大清理......

编辑：作者最初来自哪里并不重要，您可以轻松地将它们放入javascript列表中。猜测一下循环代码/对象模型的样子，更改生成div的代码

<% For i = ... %>
    <div ID='dvAuthor" + i.ToString + "' class='form-group'><div class='col-sm-4 control-label'>
<% Next %>

生成数组条目

var authors = [];
<% for i = ... %>
    authors[i] = '<%=Authors(i).Name.Replace("'", "\'") %>';
<% Next %>

或者如果不可能，您可以从当前页面内容填充列表（更麻烦但是......）

var authors = [];
var authorDivs = document.getElementById("Container").getElementsByTagName("div");
for(var i=0;i<authorDivs.length;i++) {
    authors[i] = authorDivs[i].innerHTML;
}

没有任何无关紧要的事情：

var authorDivs = document.getElementById("Container").getElementsByTagName("div");
for(var i=0;i<authorDivs.length;i++) {
    var currentId = authorDivs[i].id;
    var currentContents = authorDivs[i].innerHTML;
    // etc...
}

ASP.NET / javascript中的动态标签

3 个答案: