Блог

У меня есть список из следующих элементов :

 <li id="toolbar-elements-right">
  <img id="toolbar-icons" src="images/delete_resource.png" alt="" title="Delete VM" onclick="removeNode()">
  <img id="toolbar-icons" src="images/power_off.png" alt="" title="Stop VM" onclick="changeInstanceStatus('Stop')">
  <img id="toolbar-icons" src="images/power_on.png" alt="" title="Start VM" onclick="changeInstanceStatus('Start')">
  <img id="toolbar-icons_zoom-in" src="images/zoom-in-icon.png" alt="" title="Zoom In" onclick="zoomNodeIn()">
  <img id="toolbar-icons_zoom-out" src="images/zoom-out-icon.png" alt="" title="Zoom Out" onclick="zoomNodeOut()">
</li>
  

Я хочу, чтобы весь список был отключен, кроме двух последних изображений в функции. Я делаю что-то вроде этого :

   document.getElementById('toolbar-elements-right').style.pointerEvents = 'none';
  document.getElementById('toolbar-icons_zoom-in').style.pointerEvents = 'auto';
  document.getElementById('toolbar-icons_zoom-out').style.pointerEvents = 'auto';
  

Однако первый элемент «панель инструментов-icons_zoom-in» включен, но второй элемент «панель инструментов-icons_zoom-out» остается отключенным. Есть способ решить эту проблему?

Вместо этого вы можете отключить только первые элементы. Я добавил класс css для отключенных элементов и применил css через JavaScript.

 <li id="toolbar-elements-right">
  <img class="disable-pointer" id="toolbar-icons" src="images/delete_resource.png" alt="" title="Delete VM" onclick="removeNode()">
  <img class="disable-pointer" id="toolbar-icons" src="images/power_off.png" alt="" title="Stop VM" onclick="changeInstanceStatus('Stop')">
  <img class="disable-pointer" id="toolbar-icons" src="images/power_on.png" alt="" title="Start VM" onclick="changeInstanceStatus('Start')">
  <img id="toolbar-icons_zoom-in" src="images/zoom-in-icon.png" alt="" title="Zoom In" onclick="zoomNodeIn()">
  <img id="toolbar-icons_zoom-out" src="images/zoom-out-icon.png" alt="" title="Zoom Out" onclick="zoomNodeOut()">
</li>
  

И JS

 var elem = document.querySelectorAll(".disable-pointer");
var i;
for (i = 0; i < elem.length; i  ) {
    elem[i].style.pointerEvents = 'none';
}
  

Если вы предпочитаете простой CSS, то это намного проще, чем делать

 .disable-pointer {
  pointer-events: none;
}
  

В моем случае это работает. Проверьте свою функцию onClick zoomNodeOut(), если она работает.

https://jsfiddle.net/r110668L/

     <li id="toolbar-elements-right">
       <img id="toolbar-icons" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/delete_resource.png" alt="" title="Delete VM" onclick="alert(1)">
       <img id="toolbar-icons" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/power_off.png" alt="" title="Stop VM" onclick="alert(2)">
       <img id="toolbar-icons" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/power_on.png" alt="" title="Start VM" onclick="alert(3)">
       <img id="toolbar-icons_zoom-in" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/zoom-in-icon.png" alt="" title="Zoom In" onclick="alert(4)">
       <img id="toolbar-icons_zoom-out" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/zoom-out-icon.png" alt="" title="Zoom Out" onclick="alert(5)">
   </li>
  

Примечание: в вашем HTML есть основная ошибка. Вы видите, что селектор идентификаторов должен быть уникальным на странице / DOM. У вас не может быть более одного элемента с одинаковым идентификатором.

ДЕМОНСТРАЦИЯ:

http://plnkr.co/edit/2g0hsfgeKRImzXbSPF1p?p=preview

Он работает нормально. Пожалуйста, проверьте демонстрацию.

 document.getElementById('toolbar-elements-right').style.pointerEvents = 'none';
document.getElementById('d').style.pointerEvents = 'auto';
document.getElementById('e').style.pointerEvents = 'auto';  

 <div id="toolbar-elements-right">
  <div id="a" onclick="alert('a')">a</div>
  <div id="b" onclick="alert('b')">b</div>
  <div id="c" onclick="alert('c')">c</div>
  <div id="d" onclick="alert('d')">d</div>
  <div id="e" onclick="alert('e')">e</div>
</div>