Как разделить в html два участка кода, чтобы они не мешали друг другу?

Question

[Типа Программист]

У меня на сайте есть две карточки товаров. В каждой карточки есть картинка, при нажатии на неё открывается модальное окно. Но когда я добавляю две карточки товара, модальное окно не открывается. Как можно разделить два участка кода (две карточки), чтобы они вместе не взаимодействовали?

Comments

[Леонид Князев]

Написать для каждой карточки свой "участок кода" или написать один универсальный "участок кода", который будет работать со всеми карточками на странице.

[Типа Программист]

Леонид Князев, Я и писал универсальный код. Просто когда нажимаю на открытие, оно открывается и быстро закрывается. Встраивал два участка кода на одну страницу спомошью include.

[Александр Иванов]

Код можно увидеть?

[Типа Программист]

Александр Иванов, Да вот:
main.php

<!-- CARDS -->
		<div class="container card-container">
			<?php include ('tens1/card.php') ?>
		</div>
		
		<div class="container card-container">
			<?php include ('tens2/card.php') ?>
		</div>

И то что в include:

<div class="card-wrap">
	<div class="card-first-sections">
		<h3 class="card-name" id="card-name" title="Больше информации"><?php include ('name.php') ?></h3>
		<img src="<?php include ('img.php') ?>" alt="" class="card-img" id="card-img">
	</div>
	<div class="card-second-sections">
		<div class="numbers-wrap">
			<form class="car-minus-form">
				<button type="submit">-</button>
			</form>
			<form class="numbars-form">
				<input type="number" pattern="\d*" value="<?php include ('number.php') ?>">
			</form>
			<form class="card-plus-form">
				<button type="submit">+</button>
			</form>
		</div>
		<p id="card-prise"><?php include ('prise.php') ?>грн</p>
	</div>
</div>

<!-- MODAL -->
<div class="modal-bg">
	<div class="modal create">
		<div class="modal-not-hide-block">
			<a href="#" class="modal-bask-btn"><i class="fas fa-times"></i></a>
			<img src="<?php include ('img.php') ?>" alt="" id="card-img-modal">
			<h3 id="card-name-popab"><?php include ('name.php') ?></h3>
			<p id="card-text"><?php include ('content.php') ?></p>
		</div>
		<div class="modal-hide-block">
			<form class="modal-img-form">
				<input type="text" placeholder="<?php include ('img.php') ?>" class="modal-img-form-input" autocomplete="off" name="input">
				<button type="submit" class="modal-img-form-btn"></button>
			</form>
			<form class="modal-name-form">
				<input type="text" value="<?php include ('name.php') ?>" class="modal-name-form-input" name="input" autocomplete="off">
				<button type="submit" class="modal-name-form-btn"></button>
			</form>
			<form class="modal-prise-form">
				<input type="number" name="input" class="modal-prise-form-input" value="<?php include ('prise.php') ?>" pattern="\d*">
				<button type="submit" class="modal-prise-form-btn"></button>
			</form>
			<form class="modal-content-form">
				<textarea class="modal-content-form-textarea" autocomplete="off" id="card-text-modal" name="textarea"><?php include ('content.php') ?></textarea>
				<button type="submit" class="modal-content-form-btn"></button>
			</form>
		</div>
	</div>
	<div class="modal-skip"></div>
</div>

Всё что есть)

[Типа Программист]

Александр Иванов, прислал)

[Vearodev]

Oleg2002pr, модальнок окно работает на js, который вы не скинули, как вы могли 'написать', даже не зная что скидывать

[Vearodev]

Очевидно же что ошибка в js

[Типа Программист]

Vearodev, именно js модельного окна ?

[Типа Программист]

Vearodev, вообще вопрос был в разделении кода html..

[Типа Программист]

Vearodev, вот js:

// modal  
	$('.modal-bg').hide();
	$('.card-img').click(function () {
		$('.modal-bg').toggle(50);
		$('.modal-bask-btn').click(function () {
			$('.modal-bg').hide();
		});
	});

	// Убрать модельное окно при клике вне его области
	$('.modal-skip').click(function () {
		$('.modal-bg').hide();
	});

[Vearodev]

Oleg2002pr, зачем разделять html, если ошибка в js. В коде который вы скинули у вас сверху идёт сразу закрытие модалки, к тому же вы пишете слушатель клика внутри другого слушателя клика, который закрывает окно. Вытащите обработчик modal-task-btn на один уровень с card-image. Если не сработает, то предполагаю что нужно пройтись циклом по вашим карточкам, и отдельно повесить слушателя события, либо сделать это через делегирование, не знаю как оно там в jq работает, не пользуюсь. С телефона проверить неудобно

[Типа Программист]

Vearodev, Спасибо, извините за испорченное время. Попробую сделать)

[Типа Программист]

Vearodev, Спасибо огромное за Ваш ответ. Спасибо огромное помогло.

Answer 1

[Александр Иванов]

Приведите это

$('.card-img').click(function () {
    $('.modal-bg').toggle(50);
    $('.modal-bask-btn').click(function () {
      $('.modal-bg').hide();
    });
  });

к виду

$('.card-img').click(function () {
    $('.modal-bg').modal('show');
  });

Comments

[Типа Программист]

В консоли говорит что код не работает( Функция не найдена.

Answer 2

[Lord_Dantes]

Сделайте так чтобы при клике на card-img в функциях открывали параметры с this

Comments

[Типа Программист]

Но как я понял this это то, что к чему я до этого обращался. А мне нужно не card-img а modal-bg

[Типа Программист]

s l a v e, можете примерный код прислать...