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

Question

我目前正在尝试使用 JQuery-ui 进行一些操作，拖放 一切似乎都正常，直到我想要根据拖入可放置目标的内容更新隐藏字段值。

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

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

并尝试在将可拖动对象放入有效的可放置位置时执行此操作。（请参阅下面的完整代码）然而现在，我似乎连这些元素的价值都没有。当我将一个值添加到特定的隐藏输入元素中时。例如：

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

并尝试在函数触发时调用它例如：

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

它甚至 returns 'undefined' 开始。

我想我要么忽略了某些东西，要么左右打错了不太清楚的错字。但即使在 Whosebug 上浏览了一些类似的主题之后，我也没有在我的代码中发现问题...

希望有人可以让我回到正确的轨道上！提前致谢。

作为整页剃刀代码下方的 ASP.Net MVC 项目。

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

Answer 1

我认为您的问题来自您的 selector。您应该从 selector 中转义点，以便能够获取输入值。（在 Jquery 中，点是用于 select a class 的保留字符）

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

https://jsfiddle.net/dg81L29k/

进一步阅读：

https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

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

JQuery get / set value on hidden input element

jquery

jquery-ui-draggable

jquery-ui-droppable