Javascript Images onclick

Разработка страницы с десятками изображений, которые могут быть выбраны конечным пользователем. Попытка использовать события (onclick, onmouseover и onmouseout), чтобы сделать его графически приятным. Поскольку каждое событие изменит несколько тегов div, я решил использовать Javascript вместо CSS.Javascript Images onclick

Для того, чтобы onmouseout не воздействовал на границу кликов, я назначил переменную 'imgClicked'. Проблема в том, что одна и та же переменная изменяется для каждого щелчка. Есть ли способ назначить переменную для каждого окна, чтобы каждое изображение узнало, было ли оно нажато или нет. Или, может быть, лучший путь?

Заранее благодарен!

var borderColorOver = "#26d314"; 
 
    var borderColorOff = "#7DAFE7"; 
 
    var borderColorOn = "#d40101"; 
 
    var imgClicked = 0; 
 

 
    function heartMouseClick(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOn; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOn; 
 
     imgClicked = 1; 
 
    } else { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOff; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOff; 
 
     imgClicked = 0; 
 
    } 
 
    } 
 

 
    function heartMouseOver(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOver; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOver; 
 
    } 
 
    } 
 

 
    function heartMouseOut(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOff; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOff; 
 
    } 
 
    }

.pictureBox { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-style: solid; 
 
    border-width: 0px; 
 
} 
 
.images { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.subject { 
 
    width: 300px; 
 
    height: 100px; 
 
    border: 5px solid #FFBE00; 
 
}

<body> 
 

 
    <div class="pictureBox"> 
 
    <div class="picture"> 
 
     <img onmouseover="heartMouseOver(0)" onmouseout="heartMouseOut(0)" onclick="heartMouseClick(0)" class="images" border="5" src="photo-1.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 0 Description 
 
    </div> 
 
    </div> 
 
    <div class="pictureBox"> 
 
    <div> 
 
     <img onmouseover="heartMouseOver(1)" onmouseout="heartMouseOut(1)" onclick="heartMouseClick(1)" class="images" border="5" src="photo-2.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 1 Description 
 
    </div> 
 
    </div> 
 
    <div class="pictureBox"> 
 
    <div> 
 
     <img onmouseover="heartMouseOver(2)" onmouseout="heartMouseOut(2)" onclick="heartMouseClick(2)" class="images" border="5" src="photo-3.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 2 Description 
 
    </div> 
 
    </div> 
 

 
</body>

источник

2016-08-26 Bill Demaria

Я запутался, почему у вас есть 3 функция делает более или менее то же самое. Почему бы просто не назвать все события одной и той же функцией? – NewToJS

[Очень интересный псевдокласс] (https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) для задачи. – Teemu

@NewToJS Не будьте настолько сухими. Тебе не весело. – DanMan

Я немного изменил ваш код. Я добавил id в элементы dom и передал id ко всем методам, а не жестко кодировал их. Вот новый код в полном объеме:

 <!doctype html> 
     <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Untitled Document</title> 

     <style type="text/css">  
     .pictureBox { 
      width: 300px; 
      height: 300px; 
      border-style: solid; 
      border-width: 0px; 
     }  
     .images { 
      width: 300px; 
      height: 200px; 
     }  
     .subject { 
      width: 300px; 
      height: 100px; 
      border: 5px solid #FFBE00; 
     }  
     </style> 

     </head> 

     <script>  
     var borderColorOver = "#26d314"; 
     var borderColorOff = "#7DAFE7"; 
     var borderColorOn = "#d40101"; 
     var imgClicked = 0; 

     function heartMouseClick(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOn; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOn; 
       imgClicked = 1; 
      } else { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOff; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOff; 
       imgClicked = 0; 
      } 
     } 
     function heartMouseOver(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOver; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOver; 
      } 
     } 
     function heartMouseOut(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOff; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOff; 
      } 
     }  
     </script> 


     <body> 

     <div class="pictureBox">  
      <div class="picture"> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="0" onclick = "heartMouseClick(this.id)" class="images" border="5" src="1.jpg">        
      </div>  
      <div class="subject" id="s0" border ="5"> 
       Image 0 Description 
      </div> 
     </div> 
     <div class="pictureBox">    
      <div> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="1" onclick = "heartMouseClick(this.id)" class="images" border="5" src="emergency.jpg">        
      </div>  
      <div class="subject" id="s1" border ="5"> 
       Image 1 Description 
      </div> 
     </div> 
     <div class="pictureBox">    
      <div> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="2" onclick = "heartMouseClick(this.id)" class="images" border="5" src="lebron.jpg">        
      </div>  
      <div class="subject" id="s2" border ="5"> 
       Image 2 Description 
      </div> 
     </div>   

     </body> 
     </html>

Вы были на правильном пути, я просто добавил идентификаторы и передавать их вместо этого.

источник

2016-08-26 17:32:45 BoundForGlory

Спасибо @BoundForGlory, удивительный из вас, чтобы переделать код. –

Мое удовольствие. Я собирался получить фантазию и показать, как вы можете связать все события за один раз, но это хорошая отправная точка. – BoundForGlory

Вы можете присвоить новое свойство к объектам изображения, так как у вас уже есть массив из них в любом случае. Например:

images[heartImg].imgClicked = true;

Это может быть немного рискованным, чтобы изменить встроенный объект, но он должен быть достаточно безопасным, если вы выбираете достаточно уникальное имя свойства, что никакой другой сценарий не будет, возможно, попытаться использовать то же имя ,

Если вы не можете добавить себя к объектам изображения, альтернативой будет сохранение свойства imgClicked в атрибуте пользовательских данных соответствующих элементов DOM.

источник

2016-08-26 17:30:23 DLH

Вы можете назначить уникальный идентификатор (ID) каждому элементу img, а затем использовать функциональность массива, чтобы заботиться о каждом из изображений. Или попробуйте:

<img id="image1101" src="image1.jpg" onclick="myFunction(this.id)" />

Это активирует функцию с именем myFunction() с параметром «id».

Затем вы можете использовать это в JavaScript как:

<script type="text/javascript"> 

      function myFunction(image_id){ 
       // use your funcitons here such as 
       // document.getElementById(image_id).style; 
       // 
      } 

     </script>

источник

2016-08-26 17:35:10 Saini

Javascript Images onclick

ответ

Смежные вопросы