Javascript 两种模式弹出窗口；通行证

编辑：

我缩小了问题的范围，发现如果我有：没有MVC RAZOR的纯输入标记，那么它就可以按预期工作

<input type="text" class="hiddenid2" /> //WORKED

或

那么它就不起作用了

 @Html.Editor("id", "", new { htmlAttributes = new { @class = "hiddenId2" } })

结束更新

这让我发疯，因为我一行一行地看了一遍，一切似乎都是正确的，但我不确定我还需要在这里做些什么

我遇到的问题是：

我将Id传递给模式弹出窗口，因此我有两个具有不同Id和类名的模式弹出窗口。第一个模式弹出窗口工作，它将Id传递给模式弹出窗口，但第二个模式弹出窗口不传递Id

第一模态：

//视图链接

<a href="/Home/Employee/@item.Id" data-id="@item.Id" 
data-toggle="modal" data-target="#myModal" 
class="modalLink">Load Employee</a>

<a href="/Home/Employer/@item.Id" data-id="@item.Id" 
data-toggle="modal" data-target="#myModal2" 
class="modalLink2">Load Employer</a>

第二种模式：

//视图链接

<a href="/Home/Employee/@item.Id" data-id="@item.Id" 
data-toggle="modal" data-target="#myModal" 
class="modalLink">Load Employee</a>

<a href="/Home/Employer/@item.Id" data-id="@item.Id" 
data-toggle="modal" data-target="#myModal2" 
class="modalLink2">Load Employer</a>

---

问题在于您的选择器。两个模态包含相同的$（“.modal body.hiddenid”）.val（passedID）；这将始终对第一个.modal body.hiddenidjQuery查找操作，并且这确实始终是第一个modal中的隐藏输入

您可以通过更改第二个模态的类名来执行快速修复

这是一个跑步记录

Html:

---

@Ji_in_编码：帮助我缩小id未通过的原因，我能够同时提供

类和id

我可以通过添加id和类进行修复

@Html.Hidden("id", "", new { @class = "hiddenid2", id = "hiddenid2" })

---

您在代码中到底更改了什么？我确实将类名更改为

.modal-body2

，但我没有看到任何差异，仍然没有填充代码。。。代码笔中的一个是静态的，而我处理的是动态的ids@AbuHamzah，关键在于您使用的jquery选择器和类名。我所做的更改是给隐藏的输入一个类名hiddenid（您给两个隐藏的输入一个类hiddenid）。此外，您还可以再次单击代码笔链接。玩玩它。我添加了标签以使其清晰，你可能会认为我疯了，但它不起作用，当我查看我的页面的源代码并将我的输入呈现为

时，我不知道发生了什么，即使我的第一个模式工作时没有任何问题，我确实有。第二个模式隐藏2arggg@AbuHamzah你能把代码粘贴进去吗codepen/jsfiddle。把剃须刀代码留在那里，没关系。我去看看有没有you@AbuHamzah您当前（不工作）的razor代码呈现什么html

@using (Html.BeginForm("Employer", "Home", FormMethod.Post))
{

    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Record</h4>
                </div>
                <div class="modal-body">
                 @Html.Hidden("id", "", new { @class = "hiddenid" })
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
}

$(.modalLink2").click(function () {
     var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid").val(passedID);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<a href="/Home/Employee/@item.Id" data-id="id-number-one" 
data-toggle="modal" data-target="#myModal" 
class="modalLink">Load Employee</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Record</h4>
                </div>
                <div class="modal-body">
                   <input type="text" class="hiddenid"/>
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->




<br>
<a href="/Home/Employer/@item.Id" data-id="id-number-two" 
data-toggle="modal" data-target="#myModal2" 
class="modalLink2">Load Employer</a>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Record</h4>
      </div>
      <div class="modal-body">
        <input type="text" class="hiddenid2"/>
      </div>
      <div class="modal-footer">
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

$(".modalLink").click(function () {
    var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid").val(passedID);
});

$(".modalLink2").click(function () {
     var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid2").val(passedID);
});

@Html.Hidden("id", "", new { @class = "hiddenid2", id = "hiddenid2" })