Question

我有这个HTML网站

<html>
<head>
    <link rel="stylesheet" href="~/Content/index.css" />
    <link rel="stylesheet" href="~/Scripts/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="~/Scripts/prototype.js"></script>
    <script type="text/javascript" src="~/Scripts/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="~/Scripts/Scale.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="~/Scripts/fancyBox/source/jquery.fancybox.pack.js"></script>
    <title>Countries</title>
</head>
<body>
    <div>
        @foreach (var country in Model)
        {
            <a class="fancybox">
                <div class="tooltip">
                    @using (Html.BeginForm("ChangeCulture", "Home", new { lang = country.Culture }))
                    {
                        <!-- onclick="zoomIn('@country.Culture')"-->
                        <input id="@country.Culture" class="@country.Sprite" type="image" name="submit" src="//" />
                        <span class="tooltiptext">@country.Country</span>
                    }
                </div>
            </a>
        }
    </div>
    <script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                this.find("form").submit();
            }
        });
    })
</script>
</body>
</html>

底线是带有工具提示的国家/地区的标记显示在屏幕上，按下它需要将工具提示的语言更改为国家/地区使用的语言。我做了这个，现在我需要在收到带有标志的图片后增加整个屏幕，然后语言会改变。我找到了fancybox脚本，但在插入后，表单没有发送，选中的标志出现在中心，但之后没有任何反应，可能是什么问题？我没有写过asp和js之前的

点击图片后出现错误

Uncaught TypeError: this.find is not a function
    at Object.afterShow (Index:119)
    at Function.trigger (jquery.fancybox.pack.js:17)
    at HTMLDivElement._afterZoomIn (jquery.fancybox.pack.js:33)
    at HTMLDivElement.d.complete (jquery-latest.min.js:4)
    at j (jquery-latest.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
    at i (jquery-latest.min.js:4)
    at m.fx.tick (jquery-latest.min.js:4)

我的方法

public ActionResult ChangeCulture(string lang)
        {
            var returnUrl = this.Request.UrlReferrer?.AbsolutePath;
            var cookie = this.Request.Cookies["lang"];
            if (cookie != null)
            {
                cookie.Value = lang;
            }
            else
            {
                cookie = new HttpCookie("lang")
                {
                    HttpOnly = false,
                    Value = lang,
                    Expires = DateTime.Now.AddYears(1)
                };
            }
            this.Response.Cookies.Add(cookie);
            return this.Redirect(returnUrl ?? "Index");
        }

Answer 1

您应该使用jquery选择器

   <script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                $(".fancybox").submit();
            }
        });
    })

Answer 2

错误位于此声明中：

this.find("form").submit();

您试图在find()包装器内的普通JS对象上调用this方法，其中该函数属于jQuery对象。正确的方法是使用这样的jQuery对象：

<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                // alternative: use $(this).closest("form").submit();
                $(this).find("form").submit();
            }
        });
    });
</script>

此外，您在控制器操作中的重定向方法应如下所示，因为Controller.Redirect需要完整路径或网址才能重定向到另一个页面：

public ActionResult ChangeCulture(string lang)
{
    var returnUrl = this.Request.UrlReferrer?.AbsolutePath;

    // cookie settings here

    if (string.IsNullOrEmpty(returnUrl))
    {
        return this.RedirectToAction("Index");
    }

    return this.Redirect(returnUrl);
}

Answer 3

this中的this.find("form")不是$(".fancybox")。

请尝试使用$('.fancybox form')。

使用js脚本后无法提交html表单

3 个答案: