Передать data-title в div

117

16 июня 2021, 15:00

$('.btn_text').click(function() { 
  let formTitle = $('.btn_text').data('title'); 
  $('.form-title').html(formTitle); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<a data-title="Привет 1" href="#" class="btn_text">Привет 1</a> 
<a data-title="Привет 2" href="#" class="btn_text">Привет 2</a> 
<hr> 
<div class="form-title"></div>

При первом клике название из data-title передается как надо и попадает в div, но при клике на следующую кнопку (Привет 2), название остается прежним из (Привет 1), не меняется, в чем проблема?

Answer 1

var ids = document.getElementById('input-city'); 
var lis = [...document.querySelectorAll("ul li")]; 
var linx = [...document.querySelectorAll("ul li a")]; 
 
for (var i = 0; i < lis.length; i++) { 
  lis[i].onclick = function(e) { 
    e.preventDefault(); 
    ids.innerHTML = this.getAttribute('data-value') 
  } 
}

<div id="input-city"> </div> 
<ul id="ul"> 
  <li data-value="Город 1"><a href="">Город 1</a></li> 
  <li data-value="Город 2"><a href="">Город 2</a></li> 
  <li data-value="Город 3"><a href="">Город 3</a></li> 
</ul>

Answer 2

Ваша ошибка в том, что необходимо вытаскивать атрибут.

$('.btn_text').click(() => { 
  const formTitle = $('.btn_text').attr('title'); 
  $('.form-title').html(formTitle); 
});

.btn_text { 
  width: 100px; 
  margin-top: 5px; 
  padding 5px; 
  text-align:center; 
  user-select: none; 
  cursor:pointer; 
  background: cadetblue; 
  border-radius: 5px; 
  box-shadow: 0px 0px 10px grey; 
} 
.btn_text:active { 
  box-shadow: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="form-title"> 
  default 
</div> 
<hr> 
<div class="btn_text" title="Header"> 
  Header 
</div>

Текст не меняется(визуально) потому, что вы присваиваете одно и то же значение. Вот пример с новыми значениями:

// Возвращает случайное число между min (включительно) и max (не включая max) 
function getRandomArbitrary(min, max) { 
  return Math.random() * (max - min) + min; 
} 
 
$('.btn_text').click(() => { 
  let formTitle = $('.btn_text').attr('title'); 
  formTitle += getRandomArbitrary(10,19); 
  $('.form-title').html(formTitle); 
});

.btn_text { 
  width: 100px; 
  margin-top: 5px; 
  padding 5px; 
  text-align:center; 
  user-select: none; 
  cursor:pointer; 
  background: cadetblue; 
  border-radius: 5px; 
  box-shadow: 0px 0px 10px grey; 
} 
.btn_text:active { 
  box-shadow: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="form-title"> 
  default 
</div> 
<hr> 
<div class="btn_text" title="Header"> 
  Header 
</div>

Пример с несколькими элементами (самое простое — добавить пользовательский атрибут):

// Возвращает случайное число между min (включительно) и max (не включая max) 
function getRandomArbitrary(min, max) { 
  return Math.random() * (max - min) + min; 
} 
 
$('.btn_text').click(function() { 
  let element = $(this); 
  let title = $(element).attr('title'); 
  const id = $(element).attr('data-id'); 
  title += getRandomArbitrary(10,19); 
  $(`.form-title-${id}`).html(title); 
});

.btn_text { 
  width: 100px; 
  margin-top: 5px; 
  padding 5px; 
  text-align:center; 
  user-select: none; 
  cursor:pointer; 
  background: cadetblue; 
  border-radius: 5px; 
  box-shadow: 0px 0px 10px grey; 
} 
.btn_text:active { 
  box-shadow: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="form-title-1"> 
  default1 
</div> 
<div class="btn_text" title="Header" data-id="1"> 
  Header1 
</div> 
<hr> 
<div class="form-title-2"> 
  default2 
</div> 
<div class="btn_text" title="Header" data-id="2"> 
  Header2 
</div>

Ваш пример:

$('.btn_text').click(function(evet) { 
  event.preventDefault(); 
  const formTitle = $(this).attr('title'); 
  $('.form-title').html(formTitle); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<a title="Привет 1" href="#" class="btn_text">Привет 1</a> 
<br> 
<a title="Привет 2" href="#" class="btn_text">Привет 2</a> 
<hr> 
<div class="form-title"></div>

Вы не правильно брали пользовательский атрибут, который вам и не нужно инициализировать. У тега <a> есть свой атрибут title.

Функция getRandomArbitrary() взята с developer.mozilla.org.