On-Click img border = #color - Несколько изображений - нужно выделить только 1 - PullRequest
Новая
       45

On-Click img border = #color - Несколько изображений - нужно выделить только 1

2 голосов
/ 30 июля 2010

По сути, я пытаюсь создать список изображений (скажем, 10), и после нажатия на любое из этих изображений их границы изменятся на определенный цвет; В настоящее время это достигается с помощью простого события onClick с JS. Это не проблема. Проблема возникает при нажатии второго, третьего или четвертого изображения; конечно, все кликнувшие картинки остаются выделенными. Я хотел бы установить его так, чтобы только последнее (текущее) изображение, выбранное в наборе, оставалось с измененным цветом рамки.

Как лучше всего выполнить этот простой эффект?

Ответы [ 2 ]

4 голосов
/ 30 июля 2010

Ниже приведен простой рабочий пример: 

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

В нем не используются никакие библиотеки, такие как jQuery.Это просто 'JJ.Также код для примера

1 голос
/ 30 июля 2010

Я бы воспользовался jQuery.Дайте каждому из ваших изображений класс, например, «imageHighlight» или что-то в этом роде.Тогда вы могли бы сделать что-то вроде этого (полностью непроверенное): 

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

И иметь немного CSS с этим: 

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

Возможно, есть даже лучший способ сделать это, переключая классы CSSили что-то, но я ленивый в данный момент.Все еще перевариваю ланч:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...