私はWordPressを使用していますが、JSにはこれの複数のインスタンスがあり、PHPからJSにデータを渡します
<script type='text/javascript'>
/* <![CDATA[ */
var googlemaps_165 = {"markers":[[....]],"zoom":""};
var googlemaps_169 = {"markers":[[....]],"zoom":""};
/* ]]> */
</script>
HTMLではこれがあります
<div class="wpmaps wpmaps--165" data-id="googlemaps_165"></div>
<div class="wpmaps wpmaps--169" data-id="googlemaps_169"></div>
JSでは、このように手動でデータを操作できました
var markers = googlemaps_165.markers
しかし、どうすればこれを動的に行うことができますか？
var wpmaps = document.querySelectorAll('.wpmaps');
for (var i = 0; i < wpmaps.length; ++i) {
// this gives me "googlemaps_165" which is correct
var dataName = wpmaps[i].getAttribute('data-id');
// But I can't do this since dataName in this case is only a name, I can't access it this way
var markers = dataName.markers;
}
グローバル変数はwindowオブジェクトのプロパティであり、角かっこ（[]）表記を使用して動的にアクセスできます。
var wpmaps = document.querySelectorAll('.wpmaps');
for (var i = 0; i < wpmaps.length; ++i) {
// this gives me "googlemaps_165" which is correct
var dataName = wpmaps[i].getAttribute('data-id');
// But I can't do this since dataName in this case is only a name, I can't access it this way
var markers = window[dataName].markers;
console.log(markers);
}<script type='text/javascript'>
/* <![CDATA[ */
var googlemaps_165 = {
"markers": [
[1]
],
"zoom": ""
};
var googlemaps_169 = {
"markers": [
[2]
],
"zoom": ""
};
/* ]]> */
</script>
In HTML I have this
<div class="wpmaps wpmaps--165" data-id="googlemaps_165"></div>
<div class="wpmaps wpmaps--169" data-id="googlemaps_169"></div>NodeList.forEach()forループの代わりにノードを反復処理data-idし、要素データセットを介してviaにアクセスすることもできます。
document.querySelectorAll('.wpmaps')
.forEach(function(wpmap) {
var dataName = wpmap.dataset.id;
var markers = window[dataName].markers;
console.log(markers);
});<script type='text/javascript'>
/* <![CDATA[ */
var googlemaps_165 = {
"markers": [
[1]
],
"zoom": ""
};
var googlemaps_169 = {
"markers": [
[2]
],
"zoom": ""
};
/* ]]> */
</script>
In HTML I have this
<div class="wpmaps wpmaps--165" data-id="googlemaps_165"></div>
<div class="wpmaps wpmaps--169" data-id="googlemaps_169"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加