javascript - a.nodeName.toLowerCase 不是函数

Question

这个问题已经有答案了:

Uncaught TypeError: elem.nodeName.toLowerCase is not a function Jquery (2 个回答)

已关闭 4 年前。

我一直在我的控制台上看到这个 - 并且知道如何摆脱它。

我点击(jquery.min.js:2)我明白了

a.nodeName.toLowerCase is not a function

我不知道这是如何以及从哪里来的？

代码

@extends('layouts.admin.master')
@section('content')


<style type="text/css">
.success{
    color: #40B34E;
}

.warning{
    color: #FF5B00;
}

.danger{
    color: #F33734;
}

td .fa  {
    text-align: center;
}


table {
    table-layout: fixed;
}


.fadeInHighlight {
    color:red;
    -webkit-transition:background 3s;
    -moz-transition:background 3s;
    -o-transition:background 3s;
    transition:background 3s;
}


</style>


<div class="container-fluid">

    <div class="row">
        <div class="col-lg-12">
            <div class="view-header">
                <div class="pull-right text-right" style="line-height: 14px">

                </div>
                <div class="header-icon">
                    <i class="pe page-header-icon pe-7s-science"></i>
                </div>
                <div class="header-title">
                    <h3 class="m-b-xs">{{ $_GET['nodeName'] }} </h3>
                    <small>
                        This section will summarize the specific Node
                    </small>
                </div>
            </div>
            <hr>
        </div>
    </div>

    @include('layouts.operation.nodes.show.chart')


    <br>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-filled">
                <div class="panel-body">
                    <div class="panel-heading">
                        <h4>VNF Instances</h4>
                        <a href="/nodes/{{ $nodeId }}/create?ip={{ $_GET['ip'] }}&port={{ $_GET['port'] }}&nodeId={{ $_GET['nodeId'] }}&nodeName={{ $_GET['nodeName'] }}" class="btn btn-success pull-right"> Create</a>
                    </h4>

                </div>
                <table class="table table-responsive-sm">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Instance</th>
                            <th>VCPU</th>
                            <th>Memory</th>
                            <th>HDD</th>
                            <th>State</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>

                        @if($vnfInstances != null)

                        <?php $x = 1; ?>

                        @foreach($vnfInstances as $instance)

                        <?php $instanceId = $instance['instanceId']; ?>

                        <tr id="tr-{{ $instanceId }}">
                            <td>{{ $x++ }}</td>

                            <td>
                                <a href="/nodes/{{ $instanceId }}/summary/1?instanceId={{ trim($instanceId) }}&ip={{ $_GET['ip'] }}&port={{ $_GET['port'] }}&nodeId={{ $_GET['nodeId'] }}&instanceName={{ $instanceId }}&nodeName={{ $_GET['nodeName'] }}">
                                    {{ $instanceId }}
                                </a>
                            </td>
                            <td>{{ $instance['vCPUs'] }}</td>

                            <td>
                                @if(array_key_exists('memoryInKB',$instance))
                                {{ number_format($instance['memoryInKB']/1048576,1) }} GB
                                @endif
                            </td>

                            <td>

                                @if(array_key_exists('diskUsedInMB',$instance) && array_key_exists('diskTotalInMB',$instance))

                                {{ $instance['diskTotalInMB'] }}  MB

                                @endif


                            </td>


                            <td class="state-{{ $instanceId }}">{{ $instance['state'] }}</td>
                            <td>

                                {{-- VNV Operation --}}

                                {!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'nodes/'. $instance['instanceId'] .'/action')) !!}


                                <select class="form-control" name="action-{{ $instanceId }}" onchange="showModal('{{ $instanceId }}')">
                                    <option value="---"> --- </option>

                                    @foreach($instance['operations'] as $operation)
                                    <option value="{{ $operation }}">
                                        {{ basename($operation) }}
                                    </option>

                                    @endforeach
                                </select>

                                <input type="hidden" name="ip" value="{{ $_GET['ip'] }}">
                                <input type="hidden" name="port" value="{{ $_GET['port'] }}">
                                <input type="hidden" name="nodeId" value="{{ $_GET['nodeId'] }}">
                                <input type="hidden" name="nodeName" value="{{ $_GET['nodeName'] }}">
                                <input type="hidden" name="instaneName-{{ $instanceId }}" value="{{ $instanceId }}">

                                {!!Form::close()!!}

                                {{-- VNV Operation --}}


                            </td>

                        </tr>

                        @endforeach

                        @else

                        <tr class="text-center">
                            <td colspan="12">
                                <br>
                                No Data Available
                            </td>

                        </tr>


                        @endif

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-8">
        @include('layouts.operation.nodes.show.thumnail')
        @include('layouts.operation.nodes.show.interface')
    </div>

    <div class="col-md-4">
        @include('layouts.operation.dashboard.nfTable')
    </div>

</div>

</div>
@stop

@section('custom-scripts')

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">


    function showModal(instance) {

        console.log("showModal executed ... ");
        console.log(`%c ${instance}` , "color: green;");

        var action    = $("select[name=action-" + instance + "]").val();
        var parts     = action.split('/');
        var operation = parts.pop() || parts.pop();  // handle potential trailing slash

        var popupTemplate =
        '<div class="modal fade">' +
        '  <div class="modal-dialog">' +
        '    <div class="modal-content">' +
        '      <div class="modal-header">' +
        '        <button type="button" class="close" data-dismiss="modal">&times;</button>' +
        '        <h4 class="modal-title">Are you sure ?</h4>' +
        '      </div>' +
        '      <div class="modal-body">' +
        '        <h4 class="modal-title">You want to ' + operation + '  ' +  instance + ' ?</h4>' +
        '      </div>' +
        '      <div class="modal-footer">' +
        '        <button type="button" class="btn btn-primary" data-dismiss="modal" ' +
        '        onclick="updateAction(`'+ instance+'`)">Yes</button>' +
        '        <button type="button" class="btn btn-link" data-dismiss="modal">No</button>' +
        '      </div>' +
        '    </div>' +
        '  </div>' +
        '</div>';

        $(popupTemplate).modal()
    }

    function updateAction(instance) {

        console.log("updateAction executed ... ");


        var data         = {};
        data.ip          = $("input[name=ip]").val();
        data.port        = $("input[name=port]").val();
        data.instaneName = $("input[name=instaneName-" + instance + "]").val();
        data.action      = $("select[name=action-" + instance + "]").val();

        var parts = data.action.split('/');
        var operation = parts.pop() || parts.pop();  // handle potential trailing slash

        console.log(data);

        $.ajax({
            method: 'POST',
            url: '{{ URL::to("nodes/1/action")}}',
            crossDomain: true,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
                "Accept": "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
                "Cache-Control": "no-cache"
            },
            data: data,
            success: function(response){
                //console.log(response);

                if(response >= 200 && response <= 207 ){

                    toastr.options = {
                        "debug": false,
                        "newestOnTop": true,
                        "positionClass": "toast-top-right",
                        "closeButton": true,
                        "progressBar": true
                    };

                    toastr.success(data.instaneName + ' - ' +  operation );
                    $("select[name=action-" + instance + "]").prop('selectedIndex',0);
                    $("td[class=state-" + instance + "]").text(operation);

                } else {
                    toastr.options = {
                        "debug": false,
                        "newestOnTop": true,
                        "positionClass": "toast-top-right",
                        "closeButton": true,
                        "progressBar": true
                    };

                    toastr.error(data.instaneName + ' can not ' + operation );
                    $("select[name=action-" + instance + "]").prop('selectedIndex',0);

                }

            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });

    }

</script>



@include('layouts.operation.nodes.show.scripts.chart')
@stop

Answer 1

啊，您输入的名称中有 nodeName:

<input type="hidden" name="nodeName"

使用不同的名称，就可以解决问题。因为 jQuery 已经保留了 nodeName。