无法在循环下工作我的第二个评论框

Question

我在每个产品的循环下创建了评论框。但是在我的第一个产品中，我在这里成功评论了。但是在我的第二个产品中，当我点击“添加评论”时，我发现了意想不到的结果。点击后，此评论与我的第一个产品视频评论不同。

这是我的代码：

<h4>Product Review</h4>
</br></br>





@foreach (var laptop in ViewBag.v)
{

    <div class="row">
        <video src="~/@laptop.Image1" alt="Card Image" class="card-img-top" controls height="400px" loop />
    </div>
    @:</br>
    @:<div class="border">
        <div id="display" class="ml-2"></div>
    @:</div>
    @:</br>
    @:<div class="comment">
        <textarea id="title" type="text " rows="2" cols="4" onkeyup="Allow()" placeholder="write a comment......" style="width:840px;height:50px;"></textarea>
        <input type="submit" value="Add Comment" class="btn btn-outline-dark" onclick="insert()" style="width:150px;height:50px;" />
        @:</form>
    @:</div>
    

    <div class="row float-right">
        <a asp-action="Details" asp-controller="ShopShow" asp-route-id="@laptop.Id" class="btn btn-primary pull-right btn-outline-light">Details</a>
    </div>
    @:</br></br></hr>
   


}

site.js

var titles = [];
var titleInput = document.getElementById("title");
var messageBox = document.getElementById("display");
function Allow() {
    if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") {
        user.title.value = "";
        alert("Please Enter only alphabets");
    }
    window.location.reload()
}
function insert() {
    titles.push(titleInput.value);
    clearAndShow();
}
function clearAndShow() {
    titleInput.value = "";
    messageBox.innerHTML = "";
    messageBox.innerHTML += " " + titles.join("<br/> ") + "<br/>";
}

输出：

在输出上方，我的第一个评论框正在工作，但第二个评论框不工作。有什么解决办法。

Answer 1

根据您的代码，我发现您只是使用document.getElementById("title") 来获取标题元素。由于您有多个名为 title 的输入元素。这意味着它将始终找到第一个标题元素。

这就是为什么你的 textarea 值总是加到第一个的原因。

要解决此问题，您可以像这样向 textarea id 添加索引：

i 是 ViewBag.v 的索引。

然后您可以将索引 i 作为参数传递给 insert javascript 函数。

此外，我发现您使用了 title[] 作为全局变量，这将使所有显示 div 使用相同的 textarea 值。为了解决这个问题，我建议你可以去掉title数组，直接加上textarea值，去掉textarea。

更多细节，你可以参考下面的代码示例：

控制器：

    public IActionResult Privacy()
    {
        ViewBag.v  = new List<Laptop>() { new Laptop { Image1="path1", Id=1 }, new Laptop { Image1="path2" , Id=2} };
        return View();
      
    }

查看：

<h4>Product Review</h4>
</br></br>
@for (int i = 0; i < ViewBag.v.Count; i++)
{

    <div class="row">
        <video src="~/@ViewBag.v[i].Image1" alt="Card Image" class="card-img-top" controls height="400px" loop />
    </div>
    @:</br>
    @:<div class="border">
        <div id="display_@i" class="ml-2"></div>
    @:</div>
    @:</br>
    @:<div class="comment">
        <textarea id="title_@i" type="text " rows="2" cols="4" onkeyup="Allow(@i)" placeholder="write a comment......" style="width:840px;height:50px;"></textarea>
        <input type="submit" value="Add Comment" class="btn btn-outline-dark" 
               onclick="insert(@i)" style="width:150px;height:50px;" />
        @:</form>
    @:</div>
    <div class="row float-right">
        <a asp-action="Details" asp-controller="ShopShow" asp-route-id="@ViewBag.v[i].Id" class="btn btn-primary pull-right btn-outline-light">Details</a>
    </div>
    @:</br></br></hr>
}

js:

 function Allow() {
    if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") {
        user.title.value = "";
        alert("Please Enter only alphabets");
    }
    window.location.reload()
}
function insert(i) {
    var titleInput = document.getElementById("title_" + i);
    var messageBox = document.getElementById("display_" + i);

 
   messageBox.innerHTML +=  titleInput.value + "<br/>";


    titleInput.value = '';
}

结果：

Answer 2

当您将输入元素放入循环中时，它们的 ID 会重复，这是不行的。 Javascript 无法区分这些元素之间的区别，通常会获取第一个元素并忽略所有其他元素。

要解决此问题，您应该将 ID 更改为 title_1 和 title_2 之类的东西，以便您可以分别引用它们。

for (index ..) {
    <input id="title_${index}"/>
    <input submit onclick="insert(index)"/>
}

function insert(index) {
    const element = find('title_' + index);
    ....
}

或者您可以找到与提交按钮相关的元素。