javascript - 使用 jQuery 传递变量并检索

Question

我想单击下面 html 中的链接，创建一个模式，在模式打开时检索 data-sid，然后单击模式按钮将其传递到另一个页面。

我有以下 html:

results.Append("<td><a id=\"rateid\" data-toggle=\"modal\" href=" + bookPath + " data-sid=" + SRateID + "><span class=\"icon\">Book</span></a></td>");

JS:

<script type="text/javascript">
    var vareid;
    var varsrateid;
    function modalOutsideHours()
    {
        alert("1  -  Funtion {} runs");                                //hits this

        var vareid = document.getElementById('#rateid');
        alert("2  -  document.getEleByID runs");                       //hits this

        //    var show = rateid.getAttribute("data-sid");     //problem line breaks it
        alert('3  -  rateid = ' + vareid);        //returns null 

        alert("4  -  ");                    
        //     rateid.setAttribute("data-sid");
        alert("5");
        //      alert('data-sid = ' + varSRateID.value);
    };
</script>

模态 html:

                <!-- Modal Book outside of Rota-->
            <div id="modalBookOutsideRota" class="modal fade"  tabindex="-1" role="dialog" 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">Book outside of Rota</h4>
                        </div>
                        <div class="modal-body">
                            <p>Select a reason why this visit is being booked outside of Rota hours, then click Book.</p>
                            <p><i>If the reason isn't listed select other and please give details in the box provided.</i></p>
                            <br />
                            <asp:DropDownList ID="ddlReasons" runat="server" CssClass="form-control input-sm m-b-10" DataSourceID="reasonSource" DataTextField="reason" DataValueField="OutOfRotaID"></asp:DropDownList>
                            <asp:SqlDataSource ID="reasonSource" runat="server" />
                            <asp:TextBox ID="txtNote" runat="server" CssClass="form-control overflow" placeholder="Note..."></asp:TextBox>
                        </div>
                        <div class="modal-footer">
                            <asp:Button ID="btnSubmitBooking" runat="server" CssClass="btn btn-sm" OnClick="btnSubmitBooking_Click" Text="Book" UseSubmitBehavior="false" data-dismiss="modal"/>
                            <button data-dismiss="modal" class="btn  btn-large"> Close</button>
                        </div>
                    </div>
                </div>
            </div>

模态按钮onclick事件:

        protected void btnSubmitBooking_Click(object sender, EventArgs e)
        {
            Reason = ddlReasons.SelectedValue;
            Note = txtNote.Text;

            Response.Redirect("<a href=\"Rosterbook.aspx?sid=" + SRateID + "&date=" + dateOfCare + "&rid=" + Reason + "&note=" + Note + "\"></a>");
        }

Answer 1

代码看起来没问题。我创建了下面的 fiddle : http://jsfiddle.net/fb9f8aj5/1/

可能有多种原因:

• 浏览器问题:您是否在所有浏览器上都观察到此问题？
• 范围问题:运行脚本和加载 HTML 的顺序是什么？
• 您可以从控制台检索 data-sid 值吗？

我建议使用 jQuery 来设置/检索 data-* 值:

$("#rateid").data("sid")

下面的文档有更多信息:https://api.jquery.com/data/