javascript - 两个模态弹出窗口；传递 id

Question

编辑:

我缩小了问题范围，发现如果我有:没有 MVC RAZOR 的纯输入标签，那么它会按预期工作

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

但如果我有:(不起作用)

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

或

 @Html.Editor("id", "", 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>

查看:

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

    <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">
                 @Html.Hidden("id", "", new { @class = "hiddenid" })
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
}

JQuery:

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

第二个模态:

//查看链接

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

查看:

@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 -->
}

JQuery:

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

Answer 1

问题出在您的选择器上。两种模式都包含相同的 $(".modal-body .hiddenid").val(passedID);这将始终对第一个 .modal-body .hiddenid jquery 发现进行操作，并且这确实始终是您第一个模态中的隐藏输入。

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

这里有一个正在运行的 example on Codepen

HTML:

<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 -->

JS:

$(".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);
});