Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Изменение стиля всех одинаковых классов при наведение(клике) (https://javascript.ru/forum/jquery/53406-izmenenie-stilya-vsekh-odinakovykh-klassov-pri-navedenie-klike.html)

dmitriy39reg 03.02.2015 00:19
Изменение стиля всех одинаковых классов при наведение(клике)
 
Уважаемые гуру форума, нуждаюсь в Вашей помощи так так с скриптами я не алё, а вот проблемка возникла.
в общем создал я список с таблицей:
<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.
Поможите чем могите.

Пока что получается только так

рони 03.02.2015 01:20
dmitriy39reg,
:write: ... строки .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>

dmitriy39reg 03.02.2015 02:19
Практически так как нужно получилось, завтра поковыряюсь уберу всё лишнее. Возможно ли без конкретизации класса в самом коде, просто классов планируется много? :(

рони 03.02.2015 02:47
Цитата:
Сообщение от 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");
           })

       });
   });

ruslan_mart 03.02.2015 05:29
:D 

$(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');
           });
       });
});

рони 03.02.2015 08:11
Ruslan_xDD,
интереснее вариант без класса 'active_hover'

рони 03.02.2015 10:30
Ruslan_xDD,
6 строка нет event

рони 03.02.2015 10:33
:write: 
<!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>

dmitriy39reg 03.02.2015 12:03
Спасибо большое, маленько начал разбираться.
пока что юзаю вот такой код
$(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>

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

Сейчас буду разбираться с последним кодом от рони.

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


Часовой пояс GMT +3, время: 01:35.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице