如何更改具有相同id的元素类

Question

我有一个显示移动车辆数据的页面，其中有一个名为address的列。我添加了一个复选框，选中后会显示相应地址的纬度和经度。我正在使用tempo js 这是我的网格：

<div id="report_holder">
    <div id="waiting_result" class="ajaxloader" style="display: none"><img src="~/Images/loader.gif" /></div>
    <div id="grid_nodata" class="grd_nodata" style="display: none">No Summary data found <span id="DisplaySrchKey" class=""></span></div>
    <div id="iGridSummaryReport">
        <div class="grid rptSummary" data-template>
            <div class="rpt_row withheaders" data-before-template>
                <span class="col1">Start Datetime</span>
                <span class="col2">Start Location</span>
                <span class="col3">End Datetime</span>
                <span class="col4">End Location</span>
                <span class="col5">Max Speed (Km/h)</span>
                <span class="col6">Distance (Km)</span>
                <span class="col7">Duration</span>
                <span class="col8">Status</span>
            </div>
            <div class="rpt_row" data-template-for="lstVechSummary">
                {%if (IsBreakup == true) %}
                <span class="col1 datecol">{{StartDateTime | date '@Model.DateDisplayFormat'}}</span>
                <span class="col2">{{StartLocation}}<br /><span class="hidden" id="StartLatLng"><a href="#mapModal" role="button" class="" data-toggle="modal" data-latlon="{{IdlingLat}},{{IdlingLong}}">{{IdlingLat}},{{IdlingLong}}</a></span></span>
                <span class="col3 datecol">{{EndDateTime | date '@Model.DateDisplayFormat'}}</span>
                <span class="col4">&nbsp;</span>
                <span class="col5">&nbsp;</span>
                <span class="col6">&nbsp;</span>
                <span class="col7">{{FormattedDuration}}</span>
                <span class="col8">{{FormattedIOStatus}}</span>
                {%else%}
                <span class="col1 datecol">{{StartDateTime | date '@Model.DateDisplayFormat'}}</span>
                <span class="col2">{{StartLocation}}<br /><span class="hidden" id="StartLatLng"><a href="#mapModal" role="button" class="" data-toggle="modal" data-latlon="{{Start_Lat}},{{Start_lng}}">{{Start_Lat}},{{Start_lng}}</a></span></span>
                <span class="col3 datecol">{{EndDateTime | date '@Model.DateDisplayFormat'}}</span>
                <span class="col4">{{EndLocation}}<br /><span class="hidden" id="EndLatLng"><a href="#mapModal" role="button" class="" data-toggle="modal" data-latlon="{{End_Lat}},{{End_lng}}">{{End_Lat}},{{End_lng}}</a></span></span>
                <span class="col5">{{MaxSpeed}}</span>
                <span class="col6">{{Distance}}</span>
                <span class="col7">{{FormattedDuration}}</span>
                <span class="col8">{{FormattedIOStatus}}</span>
                {%endif%}
            </div>
            <div class="rpt_row footer" data-after-template>
                <span class="col1">Total Running Time</span>
                <span class="col2">{{RunningDuration}}</span>
                <span class="col3">&nbsp;</span>
                <span class="col4">&nbsp;</span>
                <span class="col5">{{TopSpeed}} km/h</span>
                <span class="col6">{{TotalKm}} km</span>
                <span class="col7">&nbsp;</span>
                <span class="col8">&nbsp;</span>
            </div>
        </div>
    </div>

选中复选框后，会显示纬度和经度，点击它会显示带有地图的弹出窗口。

我在复选框点击事件上完成了此功能。

 $('#chkLatLng').click(function () {
        if ($("#" + this.id).is(':checked')) {
            $(".rpt_row").find("#StartLatLng").removeClass("hidden");
            $(".rpt_row").find("#EndLatLng").removeClass("hidden");
        }
        else {
            $(".rpt_row").find("#StartLatLng").addClass("hidden");
            $(".rpt_row").find("#EndLatLng").addClass("hidden");
        }

    });

现在我想在按钮点击上同样的功能。 如果有人在按钮之前选中了复选框，则单击纬度和经度也会显示。我试过removeClass，removeAttr。似乎没什么用。

我更改了ID，但仍无法正常工作。这是我点击我想要此功能的按钮

SummaryReport.prototype.HandleClick = function () {
    if ($("#frmSummaryReport").valid() == false) {
        return false;
    }
    else
        $('.valsummary_error').removeClass('validation-summary-errors').addClass('validation-summary-valid');
    this.SubmitHandler();
}



SummaryReport.prototype.SubmitHandler = function () {

    var objThis = this;
    $('#lnkCSV').off();
    $('#lnkCSV').on("click", function () {
        window.open('/TraqrReports/GenerateReportExcel' + objThis.GetQueryString());

    });

    $('#Submit_Report').button('loading');
    console.info("submit called");

    this.MyGrid.ChangeURL("/JSON/GetVehicleSummaryReport" + objThis.GetQueryString());

    this.MyGrid.ErrorMessage = 'Sorry, There was an error while generating the Summary report. Please try again.';
    this.MyGrid.FetchData(1);

    this.MyGrid.addDataFetchCompleteHandler(function () {
        console.info("fetch complete called");
        $('#Submit_Report').button('reset');

        if (objThis.MyGrid.CurrentDataSource.lstVechSummary.length > 0)
            $('#divReportDownload').removeClass('no_visibility');
        else
            $('#divReportDownload').addClass('no_visibility');
        if ($("#chkLatLng").is(':checked')) {
            console.info("checked");
                                  $(".rpt_row").find("#StartLatLng").removeClass("hidden");
        $(".rpt_row").find("#EndLatLng").removeClass("hidden");
        $(".rpt_row").find("#StartLatLngIdling").removeClass("hidden");
        }
    });