Нужно выбрать одно изображение один раз

ProgramBox

Нужно выбрать одно изображение один раз

Post author:admin
Запись опубликована:23 августа, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

 function jobTitleDetails(id, jobTitle) {
  document.getElementById("subject").value = jobTitle;
  document.getElementById('img_'   id).className  = ' jobtitle';
}

 .jobtitle:active {
  border: 5px solid #ff0000;
}

 <img class="img-thumbnail" id="img_1" src="1.png" title="Pole Erection" alt="Pole Erection" onclick="javascript:jobTitleDetails('1', 'Pole Erection');" style="height:65px; width:65px; cursor:pointer;" />
<img class="img-thumbnail" id="img_2" src="1.png" title="Stringing as per BEL" alt="Stringing as per BEL" onclick="javascript:jobTitleDetails('2', 'Stringing as per BEL');" style="height:65px; width:65px; cursor:pointer;">

Развернуть фрагмент

Ответ №1:

Вам нужно удалить:active в css и добавить код для удаления старой выделенной границы.

  var images = document.querySelectorAll('*[id^="img_"]');
  for(var i=0; i<images.length;i  ){
   images[i].classList.remove("jobtitle");
  }

 function jobTitleDetails(id, jobTitle) {
  document.getElementById("subject").value = jobTitle;
  var images = document.querySelectorAll('*[id^="img_"]');
  for(var i=0; i<images.length;i  ){
   images[i].classList.remove("jobtitle");
  }
  document.getElementById('img_'   id).className  = ' jobtitle';
  
}

 .jobtitle {
  border: 5px solid #ff0000;
}

 <img class="img-thumbnail" id="img_1" src="1.png" title="Pole Erection" alt="Pole Erection" onclick="javascript:jobTitleDetails('1', 'Pole Erection');" style="height:65px; width:65px; cursor:pointer;" />
<img class="img-thumbnail" id="img_2" src="1.png" title="Stringing as per BEL" alt="Stringing as per BEL" onclick="javascript:jobTitleDetails('2', 'Stringing as per BEL');" style="height:65px; width:65px; cursor:pointer;">

<input type="text" id="subject">

Развернуть фрагмент

Ответ №2:

Почти готово.Удалите активный в jobtitle классе css.Вы можете увидеть цвет выбранного элемента и проверить длину выбранного изображения, используя jobtitle class length

 function jobTitleDetails(id, jobTitle) {
  //document.getElementById("subject").value = jobTitle;
  document.getElementById('img_'   id).className  = ' jobtitle';
  var len =  document.querySelectorAll('.jobtitle').length;
  console.log('selected img:' len)
}

 .jobtitle {
  border: 5px solid #ff0000;
}

 <img class="img-thumbnail" id="img_1" src="1.png" title="Pole Erection" alt="Pole Erection" onclick="javascript:jobTitleDetails('1', 'Pole Erection');" style="height:65px; width:65px; cursor:pointer;" />
<img class="img-thumbnail" id="img_2" src="1.png" title="Stringing as per BEL" alt="Stringing as per BEL" onclick="javascript:jobTitleDetails('2', 'Stringing as per BEL');" style="height:65px; width:65px; cursor:pointer;">

Развернуть фрагмент

Ответ №3:

Во-первых, я не вижу элемента с id «subject» в DOM. Вот где вы получаете первую ошибку.

 <img class="img-thumbnail" id="img_1" src="1.png" title="Pole Erection"  />
<img class="img-thumbnail" id="img_2" src="1.png" title="Stringing as per BEL" >

<div id="subject">amp;nbsp;</div>

Затем реорганизуйте свою функциональность, используя делегирование событий и используйте некоторые повторно используемые вспомогательные функции (одна функция для проверки и удаления пользовательского класса из всех элементов, которые у них есть, и одна для добавления только один раз, пользовательский класс).:

 function classname_presence (elem, cls) {
  var flag = elem.className.match(new RegExp('(\s|^)'   cls   '(\s|$)'));
  return flag ? true : false;
}

function classname_remove (elem, cls) {
  if (classname_presence(elem, cls)) {
    var reg = new RegExp('(\s|^)'   cls   '(\s|$)');
    elem.className = elem.className.replace(reg, ' ');
    elem.className = elem.className.replace(/   /g, ' ');
  }
}

document.body.addEventListener('click', function(e){
    if(classname_presence(e.target, 'img-thumbnail')){

    document.querySelectorAll('.img-thumbnail').forEach(function(element){
      classname_remove(element, 'jobTitle');
    });

    updateTitle.call(e.target);
  }
});


function updateTitle() {
    var title = this.getAttribute('title'),
    id = this.getAttribute('id').replace('img_', '');

  if(document.getElementById("subject")){
      document.getElementById("subject").innerText = title;
  }
  document.getElementById('img_'   id).className  = ' jobTitle';
}

Наконец, просто обновите CSS:

 .img-thumbnail.jobtitle{
         border: 5px solid #ff0000;
}

Скрипка здесь: jsfiddle

1. Забыл упомянуть… удалите встроенный метод «onclick» и поместите его в js-файл. Кроме того, используйте атрибуты DOM элементов, чтобы вы могли легко повторно использовать данные оттуда (например, атрибут title, чтобы вы подключали элемент и получали заголовок динамически, а не жестко кодировали его при выполнении функции)

Метки: Нужно выбрать одно изображение один раз