Javascript-форум - Значение дочернего тэга на уровень выше

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Значение дочернего тэга на уровень выше (https://javascript.ru/forum/events/61393-znachenie-dochernego-tehga-na-uroven-vyshe.html)

villiwalla

16.02.2016 15:56

Значение дочернего тэга на уровень выше

Добрый день! Подскажите пожалуйста, как можно получить значение дочернего("соседнего") тэга по клику? Есть блок который содержит заголовок (h4) и кнопку, при клике на кнопку нужно получить значение заголовка, поэтому нужен заголовок именно того блока где кликнули по кнопке заказать( Как при клике на вложенную кнопку посмотреть

<div class="flavor col-lg-3 col-md-3 col-sm-6 col-xs-12 all  russian">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-block">
  	<a class="fancybox first-img" rel="gallery173" href="/assets/images/products/173/orel.jpg" title="">
<img src="/assets/images/products/173/orel.jpg" alt="" class="img-responsive"></a>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<h4>Каминные часы "Державный орёл"</h4>
	<div class="buy">
<button class="buys btn btn-warning btn-block" data-toggle="modal" data-target="#buy" >Заказать</button>
</div>
  </div>
</div>

То до чего дошел я:

$(".buys").click(function() {
  alert($("h3").text());
});

AciDWarrioR

16.02.2016 16:14

Я у вас h3 в коде вообще не увидел. Да и не совсем понял, что вам надо. У вас есть кнопка, по клику который мы должны получить заголовок чего? какой заголовок?

villiwalla

16.02.2016 16:39

Цитата:

Сообщение от AciDWarrioR (Сообщение 408031)

Ну про h3, я не писал я про h4. При нажатии на кнопку с классом buys я хочу получить значение заголовка h4 являющегося соседним селектором к классу buy в котором и находится изначально кнопка на которую нажимаю.

Dilettante_Pro

16.02.2016 16:43

villiwalla,
Если кнопка и заголовок в одном div, то по клику на кнопке надо найти родителя кнопки и в родителе заголовок

AciDWarrioR

16.02.2016 16:48

Цитата:

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

Ну про h3, я не писал я про h4

Тогда простите, что это такое:

Цитата:

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

То до чего дошел я:
$(".buys").click(function() {
alert($("h3").text());
});

Может конечно можно проще, но я сделал так:

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="flavor col-lg-3 col-md-3 col-sm-6 col-xs-12 all  russian">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-block">
  	<a class="fancybox first-img" rel="gallery173" href="/assets/images/products/173/orel.jpg" title="">
<img src="/assets/images/products/173/orel.jpg" alt="" class="img-responsive"></a>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<h4>Каминные часы "Державный орёл"</h4>
	<div class="buy">
<button class="buys btn btn-warning btn-block" data-toggle="modal" data-target="#buy" onclick='newButton()'>Заказать</button>
</div>
  </div>
</div>
</body>
</html>
<script>
function newButton(){
	var parentDiv1 = $('.buys').parent();
	var parentDiv2 = parentDiv1.parent();
	var h4 = parentDiv2.find('h4');
	var title = h4.text();
	alert(title);
}
</script>

villiwalla

16.02.2016 16:56

Цитата:

Сообщение от AciDWarrioR (Сообщение 408036)

Тогда простите, что это такое:
Может конечно можно проще, но я сделал так:

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="flavor col-lg-3 col-md-3 col-sm-6 col-xs-12 all  russian">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-block">
  	<a class="fancybox first-img" rel="gallery173" href="/assets/images/products/173/orel.jpg" title="">
<img src="/assets/images/products/173/orel.jpg" alt="" class="img-responsive"></a>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<h4>Каминные часы "Державный орёл"</h4>
	<div class="buy">
<button class="buys btn btn-warning btn-block" data-toggle="modal" data-target="#buy" onclick='newButton()'>Заказать</button>
</div>
  </div>
</div>
</body>
</html>
<script>
function newButton(){
	var parentDiv1 = $('.buys').parent();
	var parentDiv2 = parentDiv1.parent();
	var h4 = parentDiv2.find('h4');
	var title = h4.text();
	alert(title);
}
</script>

Спасибо за помощь, но как тогда быть если на странице более 1-го подобного блока? Я так понимаю нужно обращаться к материалам по созданию событий?

AciDWarrioR

16.02.2016 17:04

Цитата:

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

быть если на странице более 1-го подобного блока?

Если на странице, то все будет работать. Вы вешаете на каждую кнопку функцию с таким нутром, как я написал. Главное, что бы в родительском dive, был только один тэг h4.
Для упрощение, если у вас будут несколько тэгов h4, можете необходимому h4 класс задавать и тогда искать по классу.
А в плане того, что все будет работать можете посмотреть:

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="flavor col-lg-3 col-md-3 col-sm-6 col-xs-12 all  russian">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-block">
  	*!*<h4> То что не покажет в alert, потому что не в том div</h4>*/!*
  	<a class="fancybox first-img" rel="gallery173" href="/assets/images/products/173/orel.jpg" title="">
<img src="/assets/images/products/173/orel.jpg" alt="" class="img-responsive"></a>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<h4>Каминные часы "Державный орёл"</h4>
	<div class="buy">
<button class="buys btn btn-warning btn-block" data-toggle="modal" data-target="#buy" onclick='newButton()'>Заказать</button>
</div>
  </div>
</div>
</body>
</html>
<script>
function newButton(){
	var parentDiv1 = $('.buys').parent();
	var parentDiv2 = parentDiv1.parent();
	var h4 = parentDiv2.find('h4');
	var title = h4.text();
	alert(title);
}
</script>

Цитата:

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

Я так понимаю нужно обращаться к материалам по созданию событий?

Думаю лучше почитать про Jquery и архитектуру DOM

Dilettante_Pro

16.02.2016 18:37

На странице 2 подобных блока, каждый со своей кнопкой

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="flavor col-lg-3 col-md-3 col-sm-6 col-xs-12 all  russian">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  	<h4> Печатается все на выбор</h4>
	<div class="buy">
      <button class="buys btn btn-warning btn-block" data-toggle="modal" data-target="#buy" onclick='newButton(this);'>Заказать</button>
   </div>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<h4>Каминные часы "Державный орёл"</h4>
	<div class="buy">
       <button class="buys btn btn-warning btn-block" data-toggle="modal" data-target="#buy" onclick='newButton(this);'>Заказать</button>
    </div>
  </div>
</div>
</body>
</html>
<script>
    function newButton(butt) {
        var parentDiv1 = $(butt).parent();
        var parentDiv2 = parentDiv1.parent();
        var h4 = parentDiv2.find('h4');
        var title = h4.text();
        alert(title);
    }
</script>

villiwalla

16.02.2016 19:50

Цитата:

Сообщение от Dilettante_Pro (Сообщение 408047)

На странице 2 подобных блока, каждый со своей кнопкой

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="flavor col-lg-3 col-md-3 col-sm-6 col-xs-12 all  russian">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  	<h4> Печатается все на выбор</h4>
	<div class="buy">
      <button class="buys btn btn-warning btn-block" data-toggle="modal" data-target="#buy" onclick='newButton(this);'>Заказать</button>
   </div>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<h4>Каминные часы "Державный орёл"</h4>
	<div class="buy">
       <button class="buys btn btn-warning btn-block" data-toggle="modal" data-target="#buy" onclick='newButton(this);'>Заказать</button>
    </div>
  </div>
</div>
</body>
</html>
<script>
    function newButton(butt) {
        var parentDiv1 = $(butt).parent();
        var parentDiv2 = parentDiv1.parent();
        var h4 = parentDiv2.find('h4');
        var title = h4.text();
        alert(title);
    }
</script>

Огромное спасибо, скажите что за данные в ~~переменную~~ функцию падают? или это просто сокращение селектора button?

Dilettante_Pro

17.02.2016 06:41

В описании функции butt - это внутреннее имя параметра, обзывайте как хотите. А при вызове функции при нажатии на конкретную кнопку в функцию передается this - ссылка на эту кнопку

Часовой пояс GMT +3, время: 07:16.