Javascript 图片点击

Question

设计一个页面，其中包含许多可供最终用户选择的图像。尝试使用事件（onclick、onmouseover 和 onmouseout）使其在图形上令人愉悦。由于每个事件都会更改几个 div 标签，因此我决定使用 Javascript 而不是 CSS。

为了不让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>

Answer 1

您可以为图像对象分配一个新的属性，因为无论如何您已经有了它们的数组。例如：

images[heartImg].imgClicked = true;

修改内置对象可能有点冒险，但如果您选择一个足够独特的属性名称，其他脚本可能不会尝试使用相同的名称，这应该是足够安全的。

如果您无法将自己的属性添加到图像对象，另一种方法是将 imgClicked 属性存储在相关 [=17] 的自定义数据属性中=] 元素.

Answer 2

我已经修改了你的代码。我将 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>

你走在正确的轨道上，我只是添加了 id 并传递了它们。

Answer 3

您可以为每个 img 元素分配唯一的 id(ID)，然后可以使用数组功能来处理每个图像。或者试试这个：

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

这将以 "id" 作为参数激活名为 myFunction() 的函数。

然后您可以在您的 javascript 中使用它作为：

<script type="text/javascript">

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

        </script>

Javascript 图片点击

Javascript Images onclick

javascript

html

css

onmouseover

onmouseout