如何从特定事件目标获取数据
[英]How to get data from specific event target
问题描述
我正在尝试使用我的list的单击事件来提取街道的名称，使用AJAX成功回调获取地址数据的整个过程完美地运行我添加了一个成功的客户对话框，其中包含他点击的街道信息。
但是在成功对话的街头表演时，我想获得街道名称并将其传输到hidden的输入，我希望使用该街道的名称，以便将来客户点击按钮时复制表单的地址AJAX ，可以使用此街道的名称在我的API中进行搜索，以便返回此操作返回该地址的扩展版本到我的表单。
但我无法思考或找到任何关于如何仅提取客户端在列表中单击的街道名称的任何内容，只有他可以返回给我的是使用来自我的API的路径在列表分组开始时生成的原始元素包含所有注册的地址
我已经尝试通过生成的元素的类获取数据，但没有结果..我曾想过尝试将ID添加到被点击的地址但我在jQuery文档中找不到任何可以帮助我的东西。
我的elements.js
$(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);
}
}
});
});
我在EJS模板中的列表
<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>
非常感谢你帮助我，我试着这么做两天... Ajax返回的成功数据（finalData）
[{
"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"
}]
单击列表后，我的控制台中的响应
elements.js:85 (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
elements.js:189 (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
elements.js:174 Selected address is:
Rua Baltazar Lorenzetto
Jardim Brasil
2 个解决方案
解决方案1
0 2018-03-11 20:43:54
试试这个
$("#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
.......................
解决方案2
0 已采纳 2018-03-13 04:51:04
对于和我一样怀疑的人，分析更多关于我们的朋友@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
如何从特定选定行的事件发送者数据中获取模型数据？
[英]How can I get the model data from my event sender data for specific selected row?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.