如何从特定事件目标获取数据

时间：2018-03-11 19:45:50

标签： javascript jquery html list.js

我尝试使用Private Sub Worksheet_Activate() Dim sh As Worksheet For Each sh In ThisWorkbook.Sheets If sh.Name <> "Group Scorecard_Usage" Then sh.Visible = xlSheetHidden End If Next sh End Sub Private Sub Worksheet_BeforeDoubleClick(ByVal Target As Range, Cancel As Boolean) Select Case Target.Address Case "$D$10" Sheets("John C - Total Applicants").Visible = True Sheets("John C - Total Applicants").Activate Case "$D$11" Sheets("Doug D - Total Applicants").Visible = True Sheets("Doug D - Total Applicants").Activate Case "$D$12" Sheets("Lesia - Total Applicants").Visible = True Sheets("Lesia - Total Applicants").Activate Case "$D$13" Sheets("Jim Elder - Total Applicants").Visible = True Sheets("Jim Elder - Total Applicants").Activate Case "$D$14" Sheets("Kevin Byrnes - Total Applicants").Visible = True Sheets("Kevin Byrnes - Total Applicants").Activate Case "$D$15" Sheets("Chelsea W - Total Applicants").Visible = True Sheets("Chelsea W - Total Applicants").Activate Case "$E$10" Sheets("Total_Candidates_Scott").Visible = True Sheets("Total_Candidates_Scott").Activate Case "$E$11" Sheets("Total_Candidates_Doug").Visible = True Sheets("Total_Candidates_Doug").Activate Case "$E$12" Sheets("Total_Candidates_Lesia").Visible = True Sheets("Total_Candidates_Lesia").Activate Case "$E$13" Sheets("Total_Candidates_Jim Elder").Visible = True Sheets("Total_Candidates_Jim Elder").Activate Case "$E$14" Sheets("Total_Candidates_Mark").Visible = True Sheets("Total_Candidates_Mark").Activate Case "$E$15" Sheets("Total_Candidates_Chelsea").Visible = True Sheets("Total_Candidates_Chelsea").Activate Case "$G$10" Sheets("Unreviewed Applicants - Scott Z").Visible = True Sheets("Unreviewed Applicants - Scott Z").Activate Case "$G$11" Sheets("Unreviewed Applicants - Doug").Visible = True Sheets("Unreviewed Applicants - Doug").Activate Case "$G$12" Sheets("Unreviewed Applicants - Lesia O").Visible = True Sheets("Unreviewed Applicants - Lesia O").Activate Case "$G$13" Sheets("Unreviewed Applicants - Jim").Visible = True Sheets("Unreviewed Applicants - Jim").Activate Case "$G$14" Sheets("Unreviewed Applicants - Mark").Visible = True Sheets("Unreviewed Applicants - Mark").Activate Case "$C$21”" Sheets("Scott_Hires_wo_ps").Visible = True Sheets("Scott_Hires_wo_ps").Activate Case "$C$22”" Sheets("Doug_Hires_wo_ps").Visible = True Sheets("Doug_Hires_wo_ps").Activate Case "$C$23”" Sheets("Lesia_Hires_wo_ps").Visible = True Sheets("Lesia_Hires_wo_ps").Activate Case "$C$24”" Sheets("Jim_Hires_wo_ps").Visible = True Sheets("Jim_Hires_wo_ps").Activate Case "$C$25”" Sheets("Mark_Hires_wo_ps").Visible = True Sheets("Mark_Hires_wo_ps").Activate Case "$C$26”" Sheets("Chelsea_Hires_wo_ps").Visible = True Sheets("Chelsea_Hires_wo_ps").Activate Case "$D$21”" Sheets("Scott_non_scheduled_inpersons").Visible = True Sheets("Scott_non_scheduled_inpersons").Activate Case "$D$22”" Sheets("Doug_non_scheduled_inperson").Visible = True Sheets("Doug_non_scheduled_inperson").Activate Case "$D$23”" Sheets("Lesia_non_scheduled_inpersons").Visible = True Sheets("Lesia_non_scheduled_inpersons").Activate Case "$D$24”" Sheets("Jim_non_scheduled_inperson").Visible = True Sheets("Jim_non_scheduled_inperson").Activate Case "$D$25”" Sheets("Mark_non_scheduled_inpersons").Visible = True Sheets("Mark_non_scheduled_inpersons").Activate Case "$D$26”" Sheets("Chelsea_ns_inpersons").Visible = True Sheets("Chelsea_ns_inpersons").Activate Case "$E$21”" Sheets("Scott_nc_inpersons").Visible = True Sheets("Scott_nc_inpersons").Activate Case "$E$23”" Sheets("Lesia_nc_inpersons").Visible = True Sheets("Lesia_nc_inpersons").Activate Case "$E$26”" Sheets("Chelsea_nc_inpersons").Visible = True Sheets("Chelsea_nc_inpersons").Activate Case "$F$22”" Sheets("Doug_Reference_Checks").Visible = True Sheets("Doug_Reference_Checks").Activate Case "$F$23”" Sheets("Lesia_Reference_Checks").Visible = True Sheets("Lesia_Reference_Checks").Activate Case "$F$24”" Sheets("Jim_Elder_Reference_Checks").Visible = True Sheets("Jim_Elder_Reference_Checks").Activate Case "$F$25”" Sheets("Mark_Reference_Checks").Visible = True Sheets("Mark_Reference_Checks").Activate Case "$F$26”" Sheets("Chelsea_Reference_Checks").Visible = True Sheets("Chelsea_Reference_Checks").Activate Case "$G$23”" Sheets("Lesia_BGCs").Visible = True Sheets("Lesia_BGCs").Activate Case "$G$25”" Sheets("Mark_BGCs").Visible = True Sheets("Mark_BGCs").Activate Case "$G$26”" Sheets("Chelsea_BGCs").Visible = True Sheets("Chelsea_BGCs").Activate End Select End Sub 中的点击事件提取街道名称，使用list成功回调获取地址数据的整个过程完全正常包含他点击的街道信息的客户对话框。

但是在成功对话的街头表演时，我想获得街道名称并将其传输到AJAX的输入，我希望使用该街道的名称，以便在未来，当客户点击按钮复制表单的地址hidden，可以使用此街道的名称在我的API中进行搜索，以便作为对此操作的回报，将该地址的扩展版本返回到我的表单

但我无法思考或找到关于如何仅提取客户点击列表的街道名称的任何内容，只有他可以返回给我的是使用路由从列表分组开始生成的原始元素我的API包含所有已注册的地址

我已经尝试通过生成的元素的类获取数据，但没有结果..我曾想过尝试将ID添加到被点击的地址但我在jQuery文档中找不到任何内容可以帮助我。

我的elements.js 

AJAX

我在EJS模板中的列表

$(document).ready(function(){
    // Setup Modal
    $('#openSearchAddress').click(function() { 
        // Start Modal
        $('#modalSearchAddress')
           .modal('show')
        ;
    });

    $('#sendSearchAddress').click(function() {
        $.ajax({
            type: "GET",
            dataType: "JSON",
            url: "https://****-api.herokuapp.com/api/itapetininga-street-last-three-searcheds?access_token=7Z****",
            success: function (finalData) {
                // Running test
                console.log(finalData);

                if (finalData) {
                    // var dd = JSON.parse(result);
                    // addressStreet(finalData[0].addressStreet)
                    // name: finalData[0].addressStreet

                    // Print Results
                    var options = {
                        valueNames: ['addressStreet', 'neighborhoodStreet']
                    };

                    // Example One
                    var values = finalData.map(function(finalDatum) {
                        return {
                            addressStreet: finalDatum.addressStreet,
                            neighborhoodStreet: finalDatum.neighborhoodStreet,
                        };
                    });

                    var userList = new List('users', options, values);

                    // Start Selected Address With Event Delegation
                    $("#target_ul").on("click", "li", function(event) {
                        // Prevent Redirect In Click
                        event.preventDefault();

                        // Load Options For Notification
                        var placementFrom = "top";
                        var placementAlign = "center";
                        var colorName = "bg-light-green";

                        // Set Options For Notification
                        showNotification(colorName, null, placementFrom, placementAlign);

                        // Start New Notification
                        function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
                            if (colorName === null || colorName === '') { colorName = 'bg-black'; }
                            if (text === null || text === '') { text = 'Endereço que você selecionou é '; }
                            if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
                            if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
                            var allowDismiss = true;
                            // Start Modern Structure For Notification
                            $.notify({
                                message: text
                            }, {
                                type: colorName,
                                allow_dismiss: allowDismiss,
                                newest_on_top: true,
                                timer: 1000,
                                placement: {
                                    from: placementFrom,
                                    align: placementAlign
                                },
                                animate: {
                                    enter: animateEnter,
                                    exit: animateExit
                                },
                                template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-35" : "") + '" role="alert">' +
                                    '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
                                    '<span data-notify="icon"></span> ' +
                                    '<span data-notify="title">{1}</span> ' +
                                    '<span data-notify="message">{2}</span>' +
                                    '<div class="progress" data-notify="progressbar">' +
                                    '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                                    '</div>' +
                                    '<div id="selectedAddress"></div>' +
                                    '<a href="javascript:void(0);" class="alert-link" id="selectedSearchAddress" hidden></a>' +
                                    '<a href="{3}" target="{4}" data-notify="url"></a>' +
                                    '</div>'
                                }
                            );
                        }

                        // Add Selected Address In Notification
                        var selectedAddress = $( this ).text();

                        console.log('Selected address is: ', selectedAddress);

                        if (event.target && event.target.nodeName === 'LI') {
                            let item = event.target;

                            $("#selectedAddress").html(item.innerHTML);
                        }

                        // Prepare Input Hidden For Import Data To Form

                        // Add Informations About Selected Address
                        $('#selectedSearchAddress').text(selectedAddress);
                    });

                    // Print Variable Contain Native Data From All Street In List
                    console.log(values);
                }
            }
        }); 
    });

非常感谢你帮助我，我试着这么长时间做这件事...... Ajax返回的成功数据（finalData） 

<div id="modalSearchAddress" class="ui small modal" style="margin-bottom: 53px !important;margin-top: 60px !important;margin-left: auto !important;margin-right: auto !important;">
    <div class="content" style="padding: 0rem !important;">
        <div class="row" style="margin-left: -30px !important; margin-right: -30px !important;">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div id="users">
                    <div class="col-xs-12">
                        <div class="card" style="margin-bottom: 0px !important;">
                            <div class="header bg-indigo">
                                <h2 class="align-center">
                                    Pesquisar Endereço
                                    <small>Aqui você pode encontrar qualquer endereço cadastrado em seu catálogo...</small>
                                </h2>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12">
                        <div style="background: #eeeeee; padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 3px;">
                            <div class="input-group" style="margin-bottom: 0px !important;">
                                <div class="form-line">
                                    <input type="text" class="form-control search align-center" id="nameSearchAddress" placeholder="Pesquise por endereços cadastrado em seu catálogo...">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12" >
                        <ul class="list list-search-address" id="target_ul">
                            <li>
                                <h3 class="addressStreet">Test</h3>
                                <p class="neighborhoodStreet">Test</p>
                            </li>
                        </ul>
                    </div>

                    <div class="col-xs-12">
                        <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
                            <a href="javascript:void(0);" class="btn bg-indigo waves-effect sort" role="button" data-sort="name">CLASSIFICAR POR NOME</a>
                            <a href="javascript:void(0);" class="btn bg-indigo waves-effect" role="button" id="sendSearchAddress">ATUALIZAR</a>
                            <a href="javascript:void(0);" class="btn bg-indigo waves-effect" role="button">COPIAR PARA FORMULARIO</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

点击列表

后我的控制台中的响应 
[{
    "addressStreet": "Rua Baltazar Lorenzetto",
    "neighborhoodStreet": "Jardim Brasil",
    "latStreet": "Esperando latitude",
    "lngStreet": "Esperando longitude",
    "postalCodeStreet": "18214-490",
    "cityStreet": "Itapetininga",
    "stateStreet": "São Paulo",
    "id": "5a90b6b5c59ccc00148766b1"
}, {
    "addressStreet": "Rua Doutor Campos Sales",
    "neighborhoodStreet": "Centro",
    "latStreet": "-23.588984",
    "lngStreet": "-48.050931",
    "postalCodeStreet": "Esperando código postal",
    "cityStreet": "Itapetininda",
    "stateStreet": "São Paulo",
    "id": "5a94332d03d2a4001407a07c"
}, {
    "addressStreet": "Rua José de Almeida Carvalho",
    "neighborhoodStreet": "Centro",
    "latStreet": "-23.5785848",
    "lngStreet": "-48.027667",
    "postalCodeStreet": "18200-354",
    "cityStreet": "Itapetininga",
    "stateStreet": "São Paulo",
    "id": "5a948a0f03d2a4001407a07d"
}, {
    "addressStreet": "Esperando endereço...",
    "neighborhoodStreet": "Esperando bairro...",
    "latStreet": "Esperando latitude",
    "lngStreet": "Esperando longitude",
    "postalCodeStreet": "Esperando código postal",
    "cityStreet": "Esperando cidade",
    "stateStreet": "Esperando estado",
    "id": "5a9eb0e4a086fb0014b65b45",
    "term": "Rua Ba"
}, {
    "addressStreet": "Esperando endereço...",
    "neighborhoodStreet": "Esperando bairro...",
    "latStreet": "Esperando latitude",
    "lngStreet": "Esperando longitude",
    "postalCodeStreet": "Esperando código postal",
    "cityStreet": "Esperando cidade",
    "stateStreet": "Esperando estado",
    "id": "5a9eb0e5a086fb0014b65b46",
    "term": "Rua Bal"
}, {
    "addressStreet": "Esperando endereço...",
    "neighborhoodStreet": "Esperando bairro...",
    "latStreet": "Esperando latitude",
    "lngStreet": "Esperando longitude",
    "postalCodeStreet": "Esperando código postal",
    "cityStreet": "Esperando cidade",
    "stateStreet": "Esperando estado",
    "id": "5a9eb0e7a086fb0014b65b47",
    "term": "Rua Balta"
}, {
    "addressStreet": "Esperando endereço...",
    "neighborhoodStreet": "Esperando bairro...",
    "latStreet": "Esperando latitude",
    "lngStreet": "Esperando longitude",
    "postalCodeStreet": "Esperando código postal",
    "cityStreet": "Esperando cidade",
    "stateStreet": "Esperando estado",
    "id": "5a9eb135a086fb0014b65b4b"
}, {
    "addressStreet": "Esperando endereço...",
    "neighborhoodStreet": "Esperando bairro...",
    "latStreet": "Esperando latitude",
    "lngStreet": "Esperando longitude",
    "postalCodeStreet": "Esperando código postal",
    "cityStreet": "Esperando cidade",
    "stateStreet": "Esperando estado",
    "id": "5a9eb136a086fb0014b65b4c"
}, {
    "addressStreet": "Esperando endereço...",
    "neighborhoodStreet": "Esperando bairro...",
    "latStreet": "Esperando latitude",
    "lngStreet": "Esperando longitude",
    "postalCodeStreet": "Esperando código postal",
    "cityStreet": "Esperando cidade",
    "stateStreet": "Esperando estado",
    "id": "5a9eb136a086fb0014b65b4d"
}, {
    "addressStreet": "Esperando endereço...",
    "neighborhoodStreet": "Esperando bairro...",
    "latStreet": "Esperando latitude",
    "lngStreet": "Esperando longitude",
    "postalCodeStreet": "Esperando código postal",
    "cityStreet": "Esperando cidade",
    "stateStreet": "Esperando estado",
    "id": "5a9eb15aa086fb0014b65b50"
}]

2 个答案:

答案 0 :(得分：0)

试试这个

              $("#target_ul").on("click", "li", function(event) {
                    var self = $(this);         // Storing the reference of the element
                    ...................... // Your code as is
                    ......................
                    // Add Selected Address In Notification
                    var selectedAddress = $( self ).text();       // Using the reference of the stored element
                    ....................... // Your code as is
                    .......................

答案 1 :(得分：0)

对于和我一样怀疑的人，分析更多关于我们的朋友@AkshayKhandelwal告诉我的事情。我试图从Api Get的开头请求不再相同的信息。通过获取特定目标，我们将无法访问在函数开头返回的原始JSON访问权限。通过解决方案，我决定选择使用ANGULAR JS构建一个控制器，利用这种方法获得我们的事件变得更加操纵和可扩展。

// Query Address In Catalog
$('#openSearchAddress').click(function() { 
    // Start Modal
    $('#modalSearchAddress')
       .modal('show')
    ;
});
  

模态的调用保持不变

angular.module('YourModuleName', [You can extend it using other libraries])
.controller('MyCtrl', function ($scope, $http) {
    $http({
        method: "GET",
        url: "Your API Link"
    }).then(function mySuccess(response) {
        // Print JSON in console
        // $scope.myWelcome = response.data;

        $scope.iconType = 'fa fa-circle-o';

        $scope.data = {
            showDelete: false
        };

        $scope.edit = function (item) {
            alert('Edit Item: ' + item.addressStreet);
        };

        $scope.clicker = function (item) {
            alert('Clicked chevron: ' + item.addressStreet)
        };
        $scope.share = function (item) {
            alert('Share Item: ' + item.addressStreet);
        };

        $scope.moveItem = function (item, fromIndex, toIndex) {
            $scope.items.splice(fromIndex, 1);
            $scope.items.splice(toIndex, 0, item);
        };

        $scope.onItemDelete = function (item) {
            $scope.items.splice($scope.items.indexOf(item), 1);
        };

        $scope.circleClicked = function (item) {
            alert('You selected Item: ' + item.addressStreet);
        }

        // Set Scope Contains Response Data
        $scope.items = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});

我必须在前端恢复我们的结构，你可以在这里添加分页，查询，过滤器，高亮，你想要的任何东西。您可以根据自己的喜好自定义样式表：] 

            <div class="col-xs-12">
                <ul class="list-search-address">
                    <li ng-repeat="item in items | filter : search" item="item" href="#/item/{{item.id}}" style="display: block; background-color: #eee; padding: 10px; box-shadow: inset 0 1px 0 #fff;">
                        <h3 style="font-size: 16px; margin: 0 0 0.3rem; font-weight: normal; font-weight: bold;">
                            <i ng-class="iconType" ng-mousedown="iconType='fa fa-check-circle-o'" ng-mouseup="iconType='fa fa-circle-o'" ng-click="circleClicked(item)"></i>{{ item.addressStreet }}</h3>
                        <p>{{ item.neighborhoodStreet }}</p>
                    </li>
                </ul>
            </div>

感谢您启发我的想法xD

相关问题
最新问题