我有一个商店选择器页面，其中有多个按钮供用户选择商店。每个按钮都有一个数据元素，用于标识相应按钮的存储ID ("data-store- ID ")。当用户单击按钮时，我想捕获商店的id。
我正在使用这个选择器，但它不会捕获被单击的按钮，它捕获页面上第一个按钮的id。例如，每次运行此操作时，无论选择哪个按钮，都会返回ID 0124。(我在谷歌标签管理器中运行此脚本，但在控制台进行测试，因此在下面的示例中没有onClick。)
如何选择所单击的相应按钮的storeid，而不是页面上的第一个按钮?
document.querySelector('.button').getAttribute("data-store-id")
下面是来自该页面的HTML:
<div class="store-locator__results set--w-100" data-has-results="" data-locator-component="result-list" data-modal-scrollable="">
<div class="store-locator__result-item store-locator__result-content--selected">
<input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{"ID":"0124","name":"Southwest Plaza","address1":"8501 West Bowles Ave","address2":null,"city":"Littleton","postalCode":"80123","latitude":39.60997,"longitude":-105.093443,"stateCode":"CO","countryCode":"US"}" disabled id="input-0124-1508743079257" name="store" type="radio" value="0124"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
<div class="row">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
<div class="col-12 col-md-8">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
<div class="store-details text-line--medium" data-store-id="0124">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
<div class="store-name font-weight--bold">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257">Southwest Plaza</label>
</div>
<address class="text-color--grey-5">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.6660997,-105.093443" target="_blank">81 West Bowles Ave<br>
Littleton, CO 80123</a><br></label>
</address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
</div>
</div>
<div class="col-12 col-md-4 flex-justify-center text-align--center">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0124" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257">Set as My Store</label></button></label>
</div>
</div>
</div>
<div class="store-locator__result-item">
<input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{"ID":"0131","name":"Cherry Creek","address1":"3000 E. 1st Ave., Ste 228","address2":null,"city":"Denver","postalCode":"80206","latitude":39.717981,"longitude":-104.952147,"stateCode":"CO","countryCode":"US"}" disabled id="input-0131-1508743079257" name="store" type="radio" value="0131"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
<div class="row">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
<div class="col-12 col-md-8">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
<div class="store-details text-line--medium" data-store-id="0131">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
<div class="store-name font-weight--bold">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257">Cherry Creek</label>
</div>
<address class="text-color--grey-5">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.71796681,-104.9566147" target="_blank">30 E. 1st Ave., Ste 228<br>
Denver, CO 80206</a><br></label>
</address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
</div>
</div>
<div class="col-12 col-md-4 flex-justify-center text-align--center">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0131" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257">Set as My Store</label></button></label>
</div>
</div>
</div>
<div class="store-locator__result-item">
<input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{"ID":"0176","name":"Park Meadows","address1":"8557 Park Meadows Center Dr","address2":null,"city":"Littleton","postalCode":"80124","latitude":39.562013,"longitude":-104.876046,"stateCode":"CO","countryCode":"US"}" disabled id="input-0176-1508743079257" name="store" type="radio" value="0176"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
<div class="row">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
<div class="col-12 col-md-8">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
<div class="store-details text-line--medium" data-store-id="0176">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
<div class="store-name font-weight--bold">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257">Park Meadows</label>
</div>
<address class="text-color--grey-5">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.56t32013,-104.87633046" target="_blank">857 Park Meadows Center Dr<br>
Littleton, CO 80124</a><br></label>
</address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
</div>
</div>
<div class="col-12 col-md-4 flex-justify-center text-align--center">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"><span class="button button--secondary button--fluid button--rounded pointer--none set--w-100" data-locator-component="preferred-store" data-store-id="0176">My Store</span></label>
</div><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
</div>
</div>
<div class="store-locator__result-item">
<input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{"ID":"0230","name":"Colorado Mills","address1":"14500 W. Colfax Avenue Ste #145","address2":null,"city":"Lakewood","postalCode":"80401","latitude":39.734172,"longitude":-105.157185,"stateCode":"CO","countryCode":"US"}" disabled id="input-0230-1508743079257" name="store" type="radio" value="0230"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
<div class="row">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
<div class="col-12 col-md-8">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
<div class="store-details text-line--medium" data-store-id="0230">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
<div class="store-name font-weight--bold">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257">Colorado Mills</label>
</div>
<address class="text-color--grey-5">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.734gg172,-105.157185" target="_blank">134500 W. Colfax Avenue Ste #145<br>
Lakewood, CO 80401</a><br></label>
</address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
</div>
</div>
<div class="col-12 col-md-4 flex-justify-center text-align--center">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0230" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257">Set as My Store</label></button></label>
</div>
</div>
</div>
</div>
您可以使用document.querySelectorAll来匹配所有.button元素。然后您可以使用forEach来迭代它们。在本例中，我将所有元素绑定到click事件:
document.querySelectorAll('.button').forEach( function(theButton) {
theButton.addEventListener( 'click', function() {
const theStoreID = this.getAttribute('data-store-id')
alert(theStoreID)
})
})<div class="store-locator__results set--w-100" data-has-results="" data-locator-component="result-list" data-modal-scrollable="">
<div class="store-locator__result-item store-locator__result-content--selected">
<input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{"ID":"0124","name":"Southwest Plaza","address1":"8501 West Bowles Ave","address2":null,"city":"Littleton","postalCode":"80123","latitude":39.60997,"longitude":-105.093443,"stateCode":"CO","countryCode":"US"}" disabled id="input-0124-1508743079257" name="store" type="radio" value="0124"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
<div class="row">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
<div class="col-12 col-md-8">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
<div class="store-details text-line--medium" data-store-id="0124">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
<div class="store-name font-weight--bold">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257">Southwest Plaza</label>
</div>
<address class="text-color--grey-5">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.6660997,-105.093443" target="_blank">81 West Bowles Ave<br>
Littleton, CO 80123</a><br></label>
</address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
</div>
</div>
<div class="col-12 col-md-4 flex-justify-center text-align--center">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0124" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257">Set as My Store</label></button></label>
</div>
</div>
</div>
<div class="store-locator__result-item">
<input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{"ID":"0131","name":"Cherry Creek","address1":"3000 E. 1st Ave., Ste 228","address2":null,"city":"Denver","postalCode":"80206","latitude":39.717981,"longitude":-104.952147,"stateCode":"CO","countryCode":"US"}" disabled id="input-0131-1508743079257" name="store" type="radio" value="0131"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
<div class="row">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
<div class="col-12 col-md-8">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
<div class="store-details text-line--medium" data-store-id="0131">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
<div class="store-name font-weight--bold">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257">Cherry Creek</label>
</div>
<address class="text-color--grey-5">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.71796681,-104.9566147" target="_blank">30 E. 1st Ave., Ste 228<br>
Denver, CO 80206</a><br></label>
</address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
</div>
</div>
<div class="col-12 col-md-4 flex-justify-center text-align--center">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0131" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257">Set as My Store</label></button></label>
</div>
</div>
</div>
<div class="store-locator__result-item">
<input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{"ID":"0176","name":"Park Meadows","address1":"8557 Park Meadows Center Dr","address2":null,"city":"Littleton","postalCode":"80124","latitude":39.562013,"longitude":-104.876046,"stateCode":"CO","countryCode":"US"}" disabled id="input-0176-1508743079257" name="store" type="radio" value="0176"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
<div class="row">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
<div class="col-12 col-md-8">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
<div class="store-details text-line--medium" data-store-id="0176">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
<div class="store-name font-weight--bold">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257">Park Meadows</label>
</div>
<address class="text-color--grey-5">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.56t32013,-104.87633046" target="_blank">857 Park Meadows Center Dr<br>
Littleton, CO 80124</a><br></label>
</address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
</div>
</div>
<div class="col-12 col-md-4 flex-justify-center text-align--center">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"><span class="button button--secondary button--fluid button--rounded pointer--none set--w-100" data-locator-component="preferred-store" data-store-id="0176">My Store</span></label>
</div><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
</div>
</div>
<div class="store-locator__result-item">
<input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{"ID":"0230","name":"Colorado Mills","address1":"14500 W. Colfax Avenue Ste #145","address2":null,"city":"Lakewood","postalCode":"80401","latitude":39.734172,"longitude":-105.157185,"stateCode":"CO","countryCode":"US"}" disabled id="input-0230-1508743079257" name="store" type="radio" value="0230"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
<div class="row">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
<div class="col-12 col-md-8">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
<div class="store-details text-line--medium" data-store-id="0230">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
<div class="store-name font-weight--bold">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257">Colorado Mills</label>
</div>
<address class="text-color--grey-5">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.734gg172,-105.157185" target="_blank">134500 W. Colfax Avenue Ste #145<br>
Lakewood, CO 80401</a><br></label>
</address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
</div>
</div>
<div class="col-12 col-md-4 flex-justify-center text-align--center">
<label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0230" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257">Set as My Store</label></button></label>
</div>
</div>
</div>
</div>. queryselector ('.button')将选择第一个按钮。您需要选择所有按钮并添加一个事件事件侦听器来获取数据。
let btns = document.querySelectorAll('button');
for (i of btns) {
i.addEventListener('click', function() {
console.log(this.getAttribute("data-store-id"));
});
}