Question

我有以下脚本：

<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript">

   var global = $(this);
    var wasclicked = 0;

    $(document).ready(function () {

        document.getElementById("modalbutton").onclick = function () {
            global.wasclicked = 1;
        };

        $('#modal-action-store').on('hidden.bs.modal', function () {
            global.wasclicked = 0;
        });

        $('#modal-action-store').on('shown.bs.modal', function () {
            if (global.wasclicked == 1) {
                var items = "<option value='0'>-- Seleccione Distrito --</option>";
                $('#DistrictID').html(items);
            }
            $('#DepartmentID').change(function () {
                var url = '/' + "Stores/GetDistrict";
                var ddlsource = "#DepartmentID";
                $.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
                    var items = '';
                    $("#DistrictID").empty();
                    $.each(data, function (i, district) {
                        items += "<option value='" + district.value + "'>" + district.text + "</option>";
                    });
                    $('#DistrictID').html(items);
                });
            });
        });
    });
</script>

它的目标是：

确定我是否打开或关闭模态窗口。
如果我打开模态窗口，请使用特定信息填充下拉列表[A]
当另一个下拉列表[B]更改其值时，请更新[A]值

问题：

在此脚本中使用$(this)是否正确？我问它是因为，虽然它有效，但如果我在这一行上设置一个断点：

var global = $（this）;

我在调试器上收到错误：无法加载资源 - 找不到404：

更新

应用建议的更改后问题仍然存在，这可能是后台另一个问题的迹象。为此，我更新了Html页面的结果：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="utf-8" http-equiv="content-type" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index - Plataforma Fantasy Park</title>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/js/jquery.dataTables.min.js?v=qcV1wr-bn4NoBtxYqghmy1WIBvxeoe8vQlCowLG-cng"></script>
        <script src="/js/dataTables.bootstrap.min.js?v=X_58s5WblGMAw9SpDtqnV8dLRNCawsyGwNqnZD0Je_s"></script>
        <script src="/js/site.js?v=ViqmmChOp_51fH3dM_KEQAFClKU0vp0UrxlREwyHKHc"></script>


        <link rel="stylesheet" href="/css/bootstrap-lumen.css" />
        <link rel="stylesheet" href="/css/site.css" />
        <link rel="stylesheet" href="/css/nestednavbar.css" />
        <link rel="stylesheet" href="/css/dataTables.bootstrap.min.css" />

</head>
<body>

    <div class="container body-content">


<nav class="navbar navbar-inverse navbar-inverse navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Plataforma Fantasy Park</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
                                <li><a href="/HechosLiquidadors/IndexAdmin">Liquidaciones</a></li>
                            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Máquinas <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-submenu">
                        <a href="#" class="dropdown-item" tabindex="-1">Registro</a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-item"><a tabindex="-1" href="/Machines">Datos Comerciales</a></li>
                            <li class="dropdown-item"><a tabindex="-1" href="/Machines/Workshop">Datos de Fabricación</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li><a href="/Machines/Familias">Familias y Tipos</a></li>
                    <li class="dropdown-submenu">
                        <a href="#" class="dropdown-item" tabindex="-1">Gestión</a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-item"><a tabindex="-1" href="/Machines/Management">Máquinas</a></li>
                            <li class="dropdown-item"><a tabindex="-1" href="/Machines/Contadores">Contadores</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
                            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Tiendas <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/Stores">Registro</a></li>
                    <li class="divider"></li>
                    <li><a href="/Stores/Management">Liquidadores</a></li>
                </ul>
            </li>
                            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Proveedores <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/Suppliers/Supplier">Fabricantes y Marcas</a></li>
                    <li><a href="/Suppliers/Dealer">Dealers</a></li>
                </ul>
            </li>
                            <li><a href="/">Gastos</a></li>
                            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Usuarios <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/User">Usuarios</a></li>
                    <li><a href="/ApplicationRole">Roles</a></li>
                </ul>
            </li>
            <li><a href="/Home/About">About</a></li>
        </ul>


<form method="post" id="logoutForm" class="navbar-right" action="/Account/SignOff">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a title="Manage" href="/Manage">Hello adelgado!</a>
        </li>
        <li>
            <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
        </li>
    </ul>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8P12Ot7bDOBImhnZFhlI8qHPFz5Z8vuFfE8MbZPcoEDO8l20qrWS3FDx0GClCFhR3NVR5F2ysRwcKkbQ1FRaxGYDU-VJsNFpqMnyDmONltKFE6YINgnCRcBc0GSa0tnSvgJCDRrrfROVsWQRmvTIylwUR2nL5YDkJfNVwzdq9wdb8utLT5rXhZeANCwvGMFWvQ" /></form>

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




<h2>Tiendas</h2>

<div class="btn-group" id="modalbutton">
    <a id="createEditStoreModal" data-toggle="modal" data-target="#modal-action-store" class="btn btn-primary" href="/Stores/Create">
            <i class="glyphicon glyphicon-plus"></i>  Nueva Tienda
        </a>
</div>
<p></p>
<table id="stores" class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th>
                Tienda
            </th>
            <th>
                Dirección
            </th>
            <th>
                Área
            </th>
            <th>
                Distrito
            </th>
            <th>
                Cadena
            </th>
            <th>Editar</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


<div aria-hidden="true" aria-labelledby="modal-action-store-label" role="dialog" tabindex="-1" id="modal-action-store" class="modal fade">
<div class="modal-dialog ">
    <div class="modal-content">
    </div>
</div>
</div>

        <hr />
        <footer>
            <p>&copy; 2017 - Plataforma Fantasy Park</p>
        </footer>
    </div>

<script src="/js/store-index.js?v=xMseET7-q434oUXfBjpd5QKjSw8t0R0P_mGdZorHwB0"></script>
<script type="text/javascript">

    var global = this;
    var wasclicked = 0;

    $(document).ready(function () {

        document.getElementById("modalbutton").onclick = function () {
            global.wasclicked = 1;
        };

        $('#modal-action-store').on('hidden.bs.modal', function () {
            global.wasclicked = 0;
        });

        $('#modal-action-store').on('shown.bs.modal', function () {
            if (global.wasclicked == 1) {
                var items = "<option value='0'>-- Seleccione Distrito --</option>";
                $('#DistrictID').html(items);
            }
            $('#DepartmentID').change(function () {
                var url = '/' + "Stores/GetDistrict";
                var ddlsource = "#DepartmentID";
                $.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
                    var items = '';
                    $("#DistrictID").empty();
                    $.each(data, function (i, district) {
                        items += "<option value='" + district.value + "'>" + district.text + "</option>";
                    });
                    $('#DistrictID').html(items);
                });
            });
        });
    });
</script>


</body>
</html>

我还包括网络标签的结果：

Answer 1

只需删除class Map extends React.Component { componentDidMount() { const node = this.node; var map = var map = L.map(node).setView([51.505, -0.09], 13); } render() { return <div ref={(node) => { this.node = node }}></div> } }变量，然后直接访问global：

wasclicked

jQuery：$（this）和上下文中的其他变量

1 个答案: