Помогите по JS

Тема в разделе "Другие языки", создана пользователем rasandrey, 4 май 2011.

Модераторы: Цукер
  1. rasandrey

    rasandrey

    Регистр.:
    2 апр 2009
    Сообщения:
    214
    Симпатии:
    6
    Помогите, плиз, с JS. Суть в следующем:
    есть html вида
    Код:
    <ul class="ad-thumb-list" id="thumbs2">
      <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/1.png" ></a></li>
      <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/2.png" ></a></li>
      <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/3.png" ></a></li>
      <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/4.png" ></a></li>
      <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/5.png" ></a></li>
     </ul>
    По событию onclick происходит выделение изображения рамкой.

    Вопрос: как сделать, чтоб при клике на одно из изображение рамки у других изображений пропадали (если были нажаты раньше)? Реализация через присвоение каждому img своего id, не подходит. Можно ли как-то по клику на изображение: сначала убирать бордер со всех в диве с id="thumbs2", а потом обводить нажатое в рамку?
     
  2. Alternator

    Alternator

    Регистр.:
    23 мар 2009
    Сообщения:
    295
    Симпатии:
    145
    да, можно
    HTML:
    
    <script type="text/javascript">
    function set_borders(obj){
      var imgs = document.getElementById('thumbs2').getElementsByTagName('img');
      for(var i = 0; i < imgs.length; i++) {
        imgs[i].style.borderWidth = '0px';
      }
      obj.style.border='1px solid #c6bfb1';
    }
    </script>
    <ul class="ad-thumb-list" id="thumbs2">
      <li><a><img onclick="set_borders(this);" src="images/thumbs/1.png" ></a></li>
      <li><a><img onclick="set_borders(this);" src="images/thumbs/2.png" ></a></li>
      <li><a><img onclick="set_borders(this);" src="images/thumbs/3.png" ></a></li>
      <li><a><img onclick="set_borders(this);" src="images/thumbs/4.png" ></a></li>
      <li><a><img onclick="set_borders(this);" src="images/thumbs/5.png" ></a></li>
     </ul>
    
     
    rasandrey нравится это.
  3. Miraage

    Miraage Angular/Laravel

    Регистр.:
    3 июн 2008
    Сообщения:
    230
    Симпатии:
    51
    если есть включеная библиотека PrototypeJS, то решение вот

    Код:
    var path = "#thumbs2 li a img";
    document.observe("dom:loaded", function(){
    	$(path).each(function(){
    		$(this).on("click", function(){
    			$(path).each(function(){
    				$(this).style.border = "0";
    			});
    			$(this).style.border = "1px solid #c6bfb1";
    		});
    	});
    });
    
    писал на быструю руку, если что пиши.
     
    rasandrey нравится это.
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    с jquery
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>tab</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#thumbs2 img').click(function(){
            $('#thumbs2 img').removeClass('border');
            $(this).addClass('border');
        });
    });
    </script>
    
    <style type="text/css">
    <!--
    .ad-thumb-list .border {
        border:1px solid #c6bfb1;
    }
    -->
    </style>
    </head>
    
    <body>
    
    <ul class="ad-thumb-list" id="thumbs2">
        <li><a><img src="images/thumbs/1.png" /></a></li>
        <li><a><img src="images/thumbs/2.png" /></a></li>
        <li><a><img src="images/thumbs/3.png" /></a></li>
        <li><a><img src="images/thumbs/4.png" /></a></li>
        <li><a><img src="images/thumbs/5.png" /></a></li>
    </ul>
    
    </body>
    </html>