Форум

Trues · #1 (**permalink**) 03.04.2015, 17:57

Всем доброго времени суток)Не могу разобраться подскажи пожалуйста

есть парочку блоков

<div class='one-vybor activ-vybor'>
	<div class='img-vybor'><img src='img/vibor-pol.jpg' alt=''></div>
	<div class='img-vybor active-img'><img src='img/vibor-pol-activ.jpg' alt=''></div>
</div>
<div class='one-vybor'>
	<div class='img-vybor'><img src='img/vibor-voskl.jpg' alt=''></div>
	<div class='img-vybor active-img'><img src='img/vibor-voskl-activ.jpg' alt=''></div>
</div>
<div class='one-vybor'>
	<div class='img-vybor'><img src='img/vibor-job.jpg' alt=''></div>
	<div class='img-vybor active-img'><img src='img/vibor-job-activ.jpg' alt=''></div>
</div>

мне нужно при нажатии на див с классом 'one-vybor' в этом диве скрывался див с классом 'img-vybor' и появлялся див с классом 'img-vybor active-img' а у дива с классоми 'one-vybor activ-vybor' скрывался див с классом 'img-vybor active-img' и появлялся див с классом 'img-vybor'
так же надо чтобы на ди который мы нажали (one-vybor) добавлялся класс 'activ-vybor' а у которого был класс activ-vybor наоборот удалялся

сделал следущим образом

$(document).ready(function(){
	$('.one-vybor').click(function(){
		$('.one-vybor').removeClass('activ-vybor');
		$(this).addClass('activ-vybor');
	});
});

этот код работает а ответ на первый вопрос я так и не нашел(

уже перепробывал массу методов но допереть все никак немогу все рядом но не так получается то все скроются то вобще не работает(((

Ребят очень прошу о помощи

Safort · #2 (**permalink**) 03.04.2015, 18:16

В jQuery есть метод .children() он как раз тебе и нужен, если я правильно понял вопрос.

рони · #3 (**permalink**) 03.04.2015, 19:08

Trues,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .one-vybor.activ-vybor .img-vybor:last-child, .one-vybor .img-vybor:first-child{
    display: block;
  }
  .one-vybor.activ-vybor .img-vybor:first-child, .one-vybor .img-vybor:last-child{
    display: none;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $(".one-vybor");
       s.click(function() {
         s.not(this).removeClass("activ-vybor");
         $(this).toggleClass("activ-vybor");
      });
});


  </script>
</head>


<body>
<div class='one-vybor activ-vybor'>
	<div class='img-vybor'><img src='http://javascript.ru/forum/images/smilies/write.gif' alt=''></div>
	<div class='img-vybor '><img src='http://javascript.ru/forum/images/smilies/victory.gif' alt=''></div>
</div>
<div class='one-vybor'>
	<div class='img-vybor'><img src='http://javascript.ru/forum/images/smilies/write.gif' alt=''></div>
	<div class='img-vybor '><img src='http://javascript.ru/forum/images/smilies/victory.gif' alt=''></div>
</div>
<div class='one-vybor'>
	<div class='img-vybor'><img src='http://javascript.ru/forum/images/smilies/write.gif' alt=''></div>
	<div class='img-vybor '><img src='http://javascript.ru/forum/images/smilies/victory.gif' alt=''></div>
</div>

</body>

</html>

Trues · #4 (**permalink**) 06.04.2015, 12:51

немного не то( но информация оказалась полезной спасибо)) но мало что от туда понял(

Trues · #5 (**permalink**) 06.04.2015, 12:55

Ребят допустим я нажал на див в нем пару дочерних дивов и как можно к ним обратится? при событии клика на родительский див

например

<div class='one'>
    <div class='two'></div>
    <div class='two_all'></div>
</div>

<div class='one'>
    <div class='two'></div>
    <div class='two_all'></div>
</div>

я нажал на первый див one и мне надо обратиться к диву с классом two но только к тому в котором мы нажали

ка то так )))

ksa · #6 (**permalink**) 06.04.2015, 13:15

Сообщение от Trues

я нажал на первый див one и мне надо обратиться к диву с классом two но только к тому в котором мы нажали

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.one {
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.one').click(function(){
		alert($(this).children('.two').text());
	});
});
</script>
</head>
<body>
<div class='one'>
    <div class='two'>1</div>
    <div class='two_all'>2</div>
</div>
<div class='one'>
    <div class='two'>3</div>
    <div class='two_all'>4</div>
</div>
</body>
</html>

laimas · #7 (**permalink**) 06.04.2015, 13:18

Вам же сказали - .children().

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    $('div.one').click(function() {
        $(this).children().each(function() {
            alert(this.innerHTML)
        })
    })
});
</script>     
</head> 

<body>
<div class='one'>
    <div class='two'>aaa</div>
    <div class='two_all'>bbb</div>
</div>
 
<div class='one'>
    <div class='two'>ccc</div>
    <div class='two_all'>ddd</div>
</div>
</body> 
</html>

ksa · #8 (**permalink**) 06.04.2015, 13:21

Сообщение от laimas

Вам же сказали - .children().

Просто ты это как-то не внятно так произнес...

laimas · #9 (**permalink**) 06.04.2015, 13:26

Исправляюсь - .children()
Так звучит?

Trues · #10 (**permalink**) 06.04.2015, 13:27

просто я глуп))) и не смог разобраться в документации. а сейчас все понял спасибо большое очеень помогли всем по плюсу к карме)

Форум

Справочник

Discord чат

Курсы javascript