Question

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;">

Answer 1

几乎完成。删除css jobtitle类中的活动对象。您可以使用jobtitle类长度查看单击的元素颜色并检查所选img的长度

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;">

Answer 2

您需要在CSS中删除：active并添加代码以删除旧的选定边框。

 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">

Answer 3

首先，我在DOM中看不到带有id“主题”的元素。那是您遇到的第一个错误。

<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">&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

需要一次选择一张图像

3 个答案: