JQuery获取/设置隐藏输入元素上的值

我目前正在用jQueryUI尝试一些东西，拖放一切似乎都能正常工作，直到我想根据拖放到可拖放目标中的内容更新隐藏字段值为止

简而言之，我试图更新给定隐藏输入元素的值，例如：

<input type="hidden" id="Fixture1.HomeTeamId" name="Fixture1.HomeTeamId" value="">

它甚至返回“undefined”作为开始

我想我要么是忽略了什么，要么是左右错字不太清楚。但是，即使在Stackoverflow上浏览了一些类似的主题，我也没有在代码中发现这个问题

希望有人能让我重回正轨！提前谢谢

作为一个ASP.NETMVC项目低于razor代码的完整页面

@model WebUI.Models.FixturesViewModel

<h2>Test</h2>

<div class="row">
    <div class="col-md-3">

        @foreach (var team in Model.Teams)
        {
            <div class="Draggable" name="Teams" data-TeamId="@team.TeamId" data-TeamName="@team.TeamName" data-CoachName="@team.CoachName">
                @team.TeamName
            </div>
        }

    </div>


    <div class="col-md-9">
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-horizontal">
                <h4>Fixtures</h4>
                <hr />

                <div>
                    <input type="hidden" id="Fixture1.HomeTeamId" name="Fixture1.HomeTeamId" value="20">
                    <input type="hidden" id="Fixture1.HomeTeamName" name="Fixture1.HomeTeamName" value="">
                    <input type="hidden" id="Fixture1.HomeCoachName" name="Fixture1.HomeCoachName" value="">
                    <input type="hidden" id="Fixture1.AwayTeamId" name="Fixture1.AwayTeamId" value="">
                    <input type="hidden" id="Fixture1.AwayTeamName" name="Fixture1.AwayTeamName" value="">
                    <input type="hidden" id="Fixture1.AwayCoachName" name="Fixture1.AwayCoachName" value="">

                    <div class="row">
                        <div class="col-md-5" data-position="Fixture1.Home">
                            <div class="Dropable">

                            </div>
                        </div>
                        <div class="col-md-2">
                            <p>Versus</p>
                        </div>
                        <div class="col-md-5" data-position="Fixture1.Away">
                            <div class="Dropable">

                            </div>
                        </div>
                    </div>

                </div>
                <hr/>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create" class="btn btn-default" />
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

@section scripts {
    <script>
        $(document).ready(function () {

            $(".Draggable").draggable({
                revert: "invalid",
                snap: ".Dropable",
                stack: ".Draggable",
                helper: "clone",
                cursor: "move"
            });


            $(".Dropable").droppable({
                accept: ".Draggable",
                drop: handleDropEvent
            });


            function handleDropEvent(event, ui) {
                //Set target variable to the droppable element
                var target = $(this);
                //Disable the droppable element (no longer a valid drop area)
                target.droppable("disable");
                //Add a button to remove
                target.parent().append("<div class='removeTeam btn btn-danger'><span class='glyphicon glyphicon-remove-circle'></span></div>");
                //Set dropped variable to the element dropped.
                var dropped = $(ui.draggable);
                //Take over the text value and add it to the container where dropped.
                target.text(dropped.text());
                //get the corresponding fixture
                var positionRef = target.parent().data("position");
                //set the hidden values where needed
                alert("Start Value: " + $("#Fixture1.HomeTeamId").val());
                $("#" + positionRef + "TeamId").val(dropped.data("teamid"));
                alert("#" + positionRef + "TeamId , should be set to " + dropped.data("teamid"));
                alert("End Value: " + $("#Fixture1.HomeTeamId").val());

                $("#" + positionRef + "TeamName").val(dropped.data("teamname"));
                $("#" + positionRef + "CoachName").val(dropped.data("coachname"));



            }
        });

        $("div").on("click", "div.removeTeam", function () {
            //Set the clicked variable to the element clicked on.
            var clicked = $(this);
            //Enable the 'container' above to allow elements to be dropped in again
            clicked.prev().droppable("enable");
            //Remove any text set
            clicked.prev().text("");
            //Remove the button
            clicked.remove();
            //get the corresponding fixture
            var positionRef = clicked.parent().data("position");
            //set the hidden values back to null
            $("#Fixture1.HomeTeamId").val("");
            $("#" + positionRef + "TeamName").val("");
            $("#" + positionRef + "CoachName").val("");
        });
    </script>
}

@model WebUI.Models.FixturesViewModel
试验
@foreach（Model.Teams中的var团队）
{
@团队名称
}
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
固定设施

对


}
@节脚本{
$（文档）.ready（函数（）{
$（“.Draggable”）.Draggable({
回复：“无效”，
快照：“.Dropable”，
堆栈：“.Draggable”，
助手：“克隆”，
光标：“移动”
});
$（“.Dropable”）.Dropable({
接受：“.Draggable”，
下降：扶手缆绳通风口
});
函数handleDropEvent（事件，ui）{
//将目标变量设置为可拖放元素
var目标=$（此）；
//禁用可拖放元素（不再是有效的拖放区域）
目标。可拖放（“禁用”）；
//添加要删除的按钮
target.parent（）.append（“”）；
//将删除的变量设置为删除的元素。
var DROPED=$（ui.draggable）；
//接管文本值并将其添加到丢弃的容器中。
target.text（drop.text（））；
//获取相应的夹具
var positionRef=target.parent（）.data（“位置”）；
//在需要的地方设置隐藏值
警报（“起始值：+$（“#Fixture1.HomeTeamId”）.val（）；
$（“#”+positionRef+“TeamId”）.val（drop.data（“TeamId”））；
警报（“#”+positionRef+”团队ID，应设置为“+dropped.data”（“团队ID”）；
警报（“结束值：+$（“#Fixture1.HomeTeamId”）.val（）；
$（“#”+positionRef+“TeamName”）.val（drop.data（“TeamName”））；
$（“#”+positionRef+“CoachName”）.val（drop.data（“CoachName”））；
}
});
$（“div”）。在（“单击”，“div.removeTeam”，函数（）{
//将clicked变量设置为单击的元素。
var clicked=$（这个）；
//启用上面的“容器”以允许再次放入元素
单击.prev（）.dropable（“启用”）；
//删除任何文本集
单击.prev（）.text（“”）；
//卸下按钮
单击。删除（）；
//获取相应的夹具
var positionRef=clicked.parent（）.data（“位置”）；
//将隐藏值设置回null
$（“#Fixture1.HomeTeamId”）.val（“”）；
$（“#”+positionRef+“TeamName”）.val（“”）；
$（“#”+positionRef+“CoachName”）.val（“”）；
});
}

我认为您的问题来自选择器。您应该从选择器中转义点，以便能够获得输入值。（在Jquery中，点是用于选择类的保留字符）

进一步阅读：

---

这确实很好用！由于我还在元素的id中使用“.”，建议不要这样做吗？随着代码的深入，当我获取现有Id（包含“.”）并添加后缀以查找相关Id时，它似乎也会起作用。如果您可以更改命名约定，您可以添加后缀而不是使用点。感谢@Quentin Roger提供的快速见解和进一步阅读文档。这有助于我回到正轨！干杯

alert("Start Value: " + $("#Fixture1.HomeTeamId").attr("value"));
//OR    
alert("Start Value: " + $("#Fixture1.HomeTeamId").val());

@model WebUI.Models.FixturesViewModel

<h2>Test</h2>

<div class="row">
    <div class="col-md-3">

        @foreach (var team in Model.Teams)
        {
            <div class="Draggable" name="Teams" data-TeamId="@team.TeamId" data-TeamName="@team.TeamName" data-CoachName="@team.CoachName">
                @team.TeamName
            </div>
        }

    </div>


    <div class="col-md-9">
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-horizontal">
                <h4>Fixtures</h4>
                <hr />

                <div>
                    <input type="hidden" id="Fixture1.HomeTeamId" name="Fixture1.HomeTeamId" value="20">
                    <input type="hidden" id="Fixture1.HomeTeamName" name="Fixture1.HomeTeamName" value="">
                    <input type="hidden" id="Fixture1.HomeCoachName" name="Fixture1.HomeCoachName" value="">
                    <input type="hidden" id="Fixture1.AwayTeamId" name="Fixture1.AwayTeamId" value="">
                    <input type="hidden" id="Fixture1.AwayTeamName" name="Fixture1.AwayTeamName" value="">
                    <input type="hidden" id="Fixture1.AwayCoachName" name="Fixture1.AwayCoachName" value="">

                    <div class="row">
                        <div class="col-md-5" data-position="Fixture1.Home">
                            <div class="Dropable">

                            </div>
                        </div>
                        <div class="col-md-2">
                            <p>Versus</p>
                        </div>
                        <div class="col-md-5" data-position="Fixture1.Away">
                            <div class="Dropable">

                            </div>
                        </div>
                    </div>

                </div>
                <hr/>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create" class="btn btn-default" />
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

@section scripts {
    <script>
        $(document).ready(function () {

            $(".Draggable").draggable({
                revert: "invalid",
                snap: ".Dropable",
                stack: ".Draggable",
                helper: "clone",
                cursor: "move"
            });


            $(".Dropable").droppable({
                accept: ".Draggable",
                drop: handleDropEvent
            });


            function handleDropEvent(event, ui) {
                //Set target variable to the droppable element
                var target = $(this);
                //Disable the droppable element (no longer a valid drop area)
                target.droppable("disable");
                //Add a button to remove
                target.parent().append("<div class='removeTeam btn btn-danger'><span class='glyphicon glyphicon-remove-circle'></span></div>");
                //Set dropped variable to the element dropped.
                var dropped = $(ui.draggable);
                //Take over the text value and add it to the container where dropped.
                target.text(dropped.text());
                //get the corresponding fixture
                var positionRef = target.parent().data("position");
                //set the hidden values where needed
                alert("Start Value: " + $("#Fixture1.HomeTeamId").val());
                $("#" + positionRef + "TeamId").val(dropped.data("teamid"));
                alert("#" + positionRef + "TeamId , should be set to " + dropped.data("teamid"));
                alert("End Value: " + $("#Fixture1.HomeTeamId").val());

                $("#" + positionRef + "TeamName").val(dropped.data("teamname"));
                $("#" + positionRef + "CoachName").val(dropped.data("coachname"));



            }
        });

        $("div").on("click", "div.removeTeam", function () {
            //Set the clicked variable to the element clicked on.
            var clicked = $(this);
            //Enable the 'container' above to allow elements to be dropped in again
            clicked.prev().droppable("enable");
            //Remove any text set
            clicked.prev().text("");
            //Remove the button
            clicked.remove();
            //get the corresponding fixture
            var positionRef = clicked.parent().data("position");
            //set the hidden values back to null
            $("#Fixture1.HomeTeamId").val("");
            $("#" + positionRef + "TeamName").val("");
            $("#" + positionRef + "CoachName").val("");
        });
    </script>
}

$(function() {
  var val = $("#Fixture1\\.HomeTeamId").val();
  alert("Start Value: " + val);
});