Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.02.2015, 00:19
Аватар для dmitriy39reg
Новичок на форуме
Отправить личное сообщение для dmitriy39reg Посмотреть профиль Найти все сообщения от dmitriy39reg
 
Регистрация: 02.02.2015
Сообщений: 4

Изменение стиля всех одинаковых классов при наведение(клике)
Уважаемые гуру форума, нуждаюсь в Вашей помощи так так с скриптами я не алё, а вот проблемка возникла.
в общем создал я список с таблицей:
<div class="class1"><img class="class1"src="1.png" title="ZZZ"/>Текст1</div><br>
<div class="class2"><img class="class2"src="2.png" title="ZZZ"/>Текст2</div><br>
<div class="class3"><img class="class3"src="3.png" title="ZZZ"/>Текст3</div><br>

<table width="200" border="0">
  <tr>
    <td class="k1" tabindex="0"><img class="class1" src="1.png" title="ZZZ"/></td>
    <td class="k2"><img class="class2"src="2.png" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="1.png" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k2"><img class="class2"src="2.png" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="1.png" title="ZZZ"/></td>
    <td class="k2"><img class="class2"src="2.png" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k3"><img class="class3"src="3.png" title="ZZZ"/></td>
    <td class="k3"><img class="class3"src="3.png" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="1.png" title="ZZZ"/></td>
  </tr>
</table>

мне нужно чтобы при наведении, на DIVы все элементы с одинаковым с DIVом классом меняли свой стиль, а при клике на него меняли стиль и запоминали изменение.
CSS
.k1 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:red;
opacity: 0.6;
}
.k2 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:green;
opacity: 0.6;
}
.k3 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:orange;
opacity: 0.6;
}
.k1:focus:not(:active){
border: 2px solid #000;
opacity : 1;
}
td:hover 
{
opacity: 1;
}

нашел что то похожее, но разобраться так и не смог.
$("div[class ^= 'class']").not("").click(function() {

$("img[class ^= 'class']").hide() ;

$("img."+$(this).attr("class")).show() ;

}) ;


По сути мне всего то нужно при наведении и клике поменять opacity: на 1 и border.
Поможите чем могите.

Пока что получается только так
Ответить с цитированием
  #2 (permalink)  
Старый 03.02.2015, 01:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,117

dmitriy39reg,
... строки .parent() можно убрать
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .k1 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:red;
opacity: 0.6;
}
.k2 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:green;
opacity: 0.6;
}
.k3 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:orange;
opacity: 0.6;
}
.k1:focus:not(:active){
border: 2px solid #000;
opacity : 1;
}
td:hover
{
opacity: 1;
}
div{
  width: 150px;
  cursor: pointer;
}

.active{
   opacity: 1;
   border: 2px solid #000;
}
.active_hover{
   opacity: 1;
   border: 2px solid #000;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  $(function() {
       var cls = [".class1", ".class2", ".class3"];
       $.each(cls, function(indx, clsName) {
           var el = $(clsName).not("div")
           $("div" + clsName).click(function() {
               el
               .parent()
               .toggleClass("active");
           }).mouseenter(function() {
               el
               .parent()
               .addClass("active_hover");
           }).mouseleave(function() {
               el
               .parent()
               .removeClass("active_hover");
           })

       });
   });
  </script>
</head>

<body><div class="class1"><img class="class1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/>Текст1</div><br>
<div class="class2"><img class="class2" src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/>Текст2</div><br>
<div class="class3"><img class="class3" src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/>Текст3</div><br>

<table width="200" border="0">
  <tr>
    <td class="k1" tabindex="0"><img class="class1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
    <td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
    <td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k3"><img class="class3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
    <td class="k3"><img class="class3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
  </tr>
</table>

</body>

</html>

Последний раз редактировалось рони, 03.02.2015 в 01:24.
Ответить с цитированием
  #3 (permalink)  
Старый 03.02.2015, 02:19
Аватар для dmitriy39reg
Новичок на форуме
Отправить личное сообщение для dmitriy39reg Посмотреть профиль Найти все сообщения от dmitriy39reg
 
Регистрация: 02.02.2015
Сообщений: 4

Практически так как нужно получилось, завтра поковыряюсь уберу всё лишнее. Возможно ли без конкретизации класса в самом коде, просто классов планируется много?
Ответить с цитированием
  #4 (permalink)  
Старый 03.02.2015, 02:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,117

Сообщение от dmitriy39reg
Возможно ли без конкретизации класса в самом коде, просто классов планируется много?
$(function() {
       var div = $("div[class ^= 'class']");
       div.each(function(indx, elem) {
           var el = $("."+elem.className).not(elem);
           $(elem).click(function() {
               el
               .parent()
               .toggleClass("active");
           }).mouseenter(function() {
               el
               .parent()
               .addClass("active_hover");
           }).mouseleave(function() {
               el
               .parent()
               .removeClass("active_hover");
           })

       });
   });
Ответить с цитированием
  #5 (permalink)  
Старый 03.02.2015, 05:29
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018



$(function() {
       $('div[class^="class"]').each(function(i, elem) {
           var el = $('.' + elem.className).not(elem).parent();
           $(elem).click(function() {
               el.toggleClass('active');
           }).on('mouseenter mouseleave', function() {
               el[e.type == 'mouseenter' ? 'addClass' : 'removeClass']('active_hover');
           });
       });
});

Последний раз редактировалось ruslan_mart, 03.02.2015 в 05:32.
Ответить с цитированием
  #6 (permalink)  
Старый 03.02.2015, 08:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,117

Ruslan_xDD,
интереснее вариант без класса 'active_hover'
Ответить с цитированием
  #7 (permalink)  
Старый 03.02.2015, 10:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,117

Ruslan_xDD,
6 строка нет event
Ответить с цитированием
  #8 (permalink)  
Старый 03.02.2015, 10:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,117


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .k1 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:red;
opacity: 0.6;
}
.k2 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:green;
opacity: 0.6;
}
.k3 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:orange;
opacity: 0.6;
}

td:hover
{
opacity: 1;
}
div{
  width: 150px;
  cursor: pointer;
}

.active{
   opacity: 1;
   border: 2px solid #000;
}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  $(function() {
       $('div[class^="class"]').each(function(i, elem) {
           var el = $('.' + elem.className).not(elem).parent(), add;
           $(elem).on('click mouseover mouseleave', function(e) {
               e.type == 'click' && (add = !add);
               el.toggleClass('active', add || e.type == 'mouseover')
           });
       });
});

  </script>
</head>

<body><div class="class1"><img class="class1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/>Текст1</div><br>
<div class="class2"><img class="class2" src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/>Текст2</div><br>
<div class="class3"><img class="class3" src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/>Текст3</div><br>

<table width="200" border="0">
  <tr>
    <td class="k1" tabindex="0"><img class="class1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
    <td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
    <td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k3"><img class="class3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
    <td class="k3"><img class="class3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
    <td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
  </tr>
</table>

</body>

</html>
Ответить с цитированием
  #9 (permalink)  
Старый 03.02.2015, 12:03
Аватар для dmitriy39reg
Новичок на форуме
Отправить личное сообщение для dmitriy39reg Посмотреть профиль Найти все сообщения от dmitriy39reg
 
Регистрация: 02.02.2015
Сообщений: 4

Спасибо большое, маленько начал разбираться.
пока что юзаю вот такой код
$(function() {
       var div = $("div[class ^= 's']");
       div.each(function(indx, elem) {
           var el = $("."+elem.className).not(elem);
           $(elem).click(function() {
               el
               .parent()
               .toggleClass("a");
           }).mouseover(function() {
               el
               .parent("td")
               .addClass("ah");
           }).mouseout(function() {
               el
               .parent("td")
               .removeClass("ah");
           })
        });
   });

мне он более понятен, но в нём небольшая проблема со снятием выделенного в таблице, оно происходит только после того как убирается курсор с DIVа.
Стиль подредактировал
td{
border: 2px dotted #000;
border-radius: 16px 16px 16px;
opacity: 0.6;
}
.k1 {
background:red;
}
.k2 {
background:green;
}
.k3 {
background:orange;
}
.a{
   opacity: 1;
   border: 2px solid #000;
}
.ah{
   opacity: 1;
   border: 2px solid #000;
}
div{
width: 100px;
cursor: pointer;
border: 2px dotted #000;
border-radius: 16px 16px 16px;
opacity: 0.7;
}
div:hover
{
opacity: 1;
}


Сам html
<div class="s1"><img class="s1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/>Текст1</div><br>
<div class="s2"><img class="s2" src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/>Текст2</div><br>
<div class="s3"><img class="s3" src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/>Текст3</div><br>
<table width="200" border="0">
  <tr>
    <td class="k1"><img class="s1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
    <td class="k2"><img class="s2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
    <td class="k1"><img class="s1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k2"><img class="s2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
    <td class="k1"><img class="s1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
    <td class="k2"><img class="s2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
  </tr>
  <tr>
    <td class="k3"><img class="s3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
    <td class="k3"><img class="s3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
    <td class="k1"><img class="s1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
  </tr>
</table>

выглядит всё это вот так

Сейчас буду разбираться с последним кодом от рони.
Ответить с цитированием
  #10 (permalink)  
Старый 03.02.2015, 12:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,117

Сообщение от dmitriy39reg
но в нём небольшая проблема со снятием выделенного в таблице, оно происходит только после того как убирается курсор с DIVа.
это решено в 8 посте
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое изменение цены при изменении количества товара MrNix21 Элементы интерфейса 9 08.12.2013 21:47
Выдать список всех свойств указанного при вводе объекта указанного фрейма flasher167 Общие вопросы Javascript 11 05.04.2013 08:14
Блок поверх всех окон при нажатии на button SmeTana Общие вопросы Javascript 16 21.02.2013 14:03
Обрезать часть слов у всех <h3> при загрузке страницы swess Общие вопросы Javascript 9 14.01.2012 06:44
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 19:13