On-Click img border = #color - Multiple images - O

2019-04-02 07:49发布

站内问答 / JavaScript
384 2 6

Basically what I am trying to accomplish is create a list of images (let's say 10) and upon clicking any of these images, their border changes to a specific color; currently accomplishing this with a simple onClick event with JS. That's not an issue. The trouble comes in when clicking a second or third or forth image; all of the images clicked remain highlighted, of course. I would like to set it so that only the last (current) image selected in the set remain with the border color changed.

What is the best way to accomplish this simple effect?

2条回答
疯言疯语
2楼-- · 2019-04-02 08:35

Below is a simple working example:

<!doctype html>
  <html>
      <head>
          <title>Website.com</title>

          <style type="text/css">
           .normal {
              border:none;
           }
           .highlighted {
             border:1px solid #336699;
           }
          </style>

          <script type="text/javascript">


           var ImageSelector = function() {
              var imgs = null;
              var selImg = null;

              return {
                 addImages: function(container) {
                    imgs = container.getElementsByTagName("img");
                    for(var i = 0, len = imgs.length; i < len; i++) {
                       var img = imgs[i];
                       img.className = "normal";
                       img.onclick = function()  {
                          if(selImg)   {
                             selImg.className = "normal";
                          }
                          this.className = "highlighted";
                          selImg = this;
                       };
                    }
                 }
              };
           }();

          </script>

      </head>
      <body>
          <div>
              <div id="menu">
                  <img src="cube.png" width="30" height="30" />
                  <img src="cube.png" width="30" height="30" />
                  <img src="cube.png" width="30" height="30" />
                  <img src="cube.png" width="30" height="30" />
                  <img src="cube.png" width="30" height="30" />
                  <img src="cube.png" width="30" height="30" />
                  <img src="cube.png" width="30" height="30" />
              </div>
          </div>

          <script type="text/javascript">

              var div = document.getElementById("menu");
              ImageSelector.addImages(div);

          </script>
      </body>
  </html>

This does not use any library such as jQuery. Its just plain 'ol js. Also the code is for the sake of example

查看更多
0人赞 添加讨论(0) 举报
放我归山
3楼-- · 2019-04-02 08:44

I would take advantage of jQuery. Give each of your images a class, for example, "imageHighlight" or something. Then you could do something like this (completely untested):

$(document).ready(function() {
    $('img.imageHighlight').click(function() {
        $('img.imageHighlight').css('border-width', 0);
        $(this).css('border-width', '3px');
    });
});

And have some CSS with it:

img.imageHighlight {
    border: 0px solid #345678;
}

There's probably even a better way to do it by toggling CSS classes or something, but I'm lazy at the moment. Still digesting lunch :)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)