Форум

villiwalla · #1 (**permalink**) 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 · #2 (**permalink**) 16.02.2016, 16:14

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

villiwalla · #3 (**permalink**) 16.02.2016, 16:39

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

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

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

Dilettante_Pro · #4 (**permalink**) 16.02.2016, 16:43

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

AciDWarrioR · #5 (**permalink**) 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 · #6 (**permalink**) 16.02.2016, 16:56

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

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

<!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 · #7 (**permalink**) 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 · #8 (**permalink**) 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 · #9 (**permalink**) 16.02.2016, 19:50

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

На странице 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 · #10 (**permalink**) 17.02.2016, 06:41

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

Форум

Справочник

Discord чат

Курсы javascript