Блог

У меня есть кнопка с идентификатором, который устанавливает глобальную переменную, подобную этой:

 <div class="mybuttons"    
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i> Current</button>
</div>
  

Затем в JS:

 var mapNumber;

const mybuttons = document.querySelectorAll('.mybuttons button');
mybuttons.forEach(mybutton => {
  mybutton.addEventListener('click', processClick);
});

function processClick() {
  window.mapNumber = this.id; // the id of the clicked button
} 
  

Вторая кнопка в div с идентификатором #mapOneCurrent просто повторно открывает модальный режим без обновления данных.

Я хотел бы, чтобы при нажатии второй кнопки (например, #mapOneCurrent) переменная mapNumber просто оставалась как mapOne (без слова «Current» в конце).). Таким образом, это было бы почти так, как если бы была нажата другая кнопка.

Возможно ли это сделать в сценарии такого типа?

Это должно делать то, что вы хотите:

 var mapNumber;

const mybuttons = [...document.querySelectorAll('.mybuttons button')];
mybuttons.forEach(mybutton=>{
  mybutton.addEventListener('click',function() {
    window.mapNumber = this.id.replace("Current",""); // the id of the clicked button
    console.log(mapNumber);
  });
})  

 <div class="mybuttons">   
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i>Current</button>
</div>  

Однако вы могли бы упростить это, используя «делегированное прослушивание событий» для:

 var mapNumber;

document.querySelector('.mybuttons').addEventListener('click',function(ev){
  if (ev.target.tagName==="BUTTON") {  
    window.mapNumber = ev.target.id.replace("Current","");
    console.log(mapNumber);
  }
})
   

 <div class="mybuttons">   
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i>Current</button>
</div>  

В этом фрагменте событие прослушивает click s в контейнере-оболочке .mybuttobs , но запускает действия только в том случае, если был нажат inside BUTTON .