Форум

toren · #1 (**permalink**) 13.11.2016, 18:57

Приветствую! Помогите как сделать.

Что нужно:

Есть список клиентов, для примера их 2-а.

<div id="spisok_clientov">
  <!-- Первый клиент !-->
  <div id="client">
         <div class="photo"><img src="img.png"/></div>
         <div class="name">Пупкин</div>
  </div>
 <!-- Второй клиент !-->
 <div id="client">
         <div class="photo"><img src="img2.png"/></div>
         <div class="name">Сидоров</div>
  </div>
</div>
<!-- В этот div нужно подставлять фото и имя клиента, на которого нажмешь !-->
<div id="Result"></div>

Как лучше это реализовать. Надеюсь понятно объяснил

Т.е. Если кликнуть на первый id=client, то нужно чтобы в id="Result" подставилось содержимое первого id=client

<div id="Result">
       <div class="photo"><img src="img.png"/></div>
       <div class="name">Пупкин</div>
</div>

ksa · #2 (**permalink**) 14.11.2016, 08:19

toren, ИД должен быть уникальным на странице.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<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>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('.client').click(function(){
		$('#Result').text($(this).find('.name').text());
	});
});
</script>
</head>
<body>
<div id="spisok_clientov">
  <!-- Первый клиент !-->
  <div class="client">
         <div class="photo"><img src="img.png"/></div>
         <div class="name">Пупкин</div>
  </div>
 <!-- Второй клиент !-->
 <div class="client">
         <div class="photo"><img src="img2.png"/></div>
         <div class="name">Сидоров</div>
  </div>
</div>
<!-- В этот div нужно подставлять фото и имя клиента, на которого нажмешь !-->
<div id="Result"></div>
</body>
</html>

Coriolan161 · #3 (**permalink**) 14.11.2016, 11:25

ksa,
лучше на контейнер вешать через .on и указывать доп. параметр

$('#clients-list').on('click', '.client', function(){

Так выйдет один обработчик, а не толпа в случае если клиентов дофига

ksa · #4 (**permalink**) 14.11.2016, 13:28

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

лучше на контейнер вешать

Это уже каждый решает самостоятельно...

Форум

Справочник

Discord чат

Курсы javascript