jQueryでpタグ内のテキストを書き換えたい

ご覧いただきありがとうございます。

商品一覧画面でお気に入りの登録済か否かを判別してpタグのテキストを書き換える
処理を実装しようとしています。

商品一覧ページ(product.php)

php
1<!DOCTYPE html>
2<html lang="ja">
3<?php 
4	$siteTitle = '商品ページ';
5?>
6<head>
7	<meta charset="utf-8">
8	<title>サイトタイトル</title>
9	<meta name="description" content="ディスクリプションを入力">
10	<meta name="viewport" content="width=device-width, initial-scale=1.0">
11	<link rel="stylesheet" href="style.css">
12	<!-- [if lt IE 9] -->
13	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
14
15	<!-- [endif] -->
16	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
17	<script src="app.js"></script>
18	<script src="fav.js"></script>
19</head>
20
21<body>
22	<!----- header----->
23	<header>
24		<div class="logo">
25			<a href="top.php">極楽<br>酒造</a>
26		</div>
27		<h1>
28		<?php echo $siteTitle; ?>
29		</h1>
30		<div class="cart-box">カートを見る(<span id="cart-count">0</span>)</div>
31		<?php
32			require('function.php');
33			$dbh = db_connect();
34		
35			$stmt = $dbh->prepare("SELECT id, category_name from category where big_flg=1 order by id");
36		
37			$stmt->execute();
38		
39			$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
40		
41		
42		?>
43		<ul class="drop">
44			<li><a href="top.php">HOME</a></li>
45			<?php
46				foreach($results as $rec){
47			?>
48			<li><?php echo $rec['category_name']; 
49			?>
50				<ul class="drop_menu">
51					<?php
52				
53				$sql = "SELECT id, category_name, big_id from category where big_flg=0 and big_id = :big_id order by id";
54		
55				$params = array(':big_id' => $rec['id']);
56		
57				$stmt2 = sql_exec($dbh, $sql, $params);
58		
59				$results2 = $stmt2->fetchAll(PDO::FETCH_ASSOC);
60					
61				foreach($results2 as $rec2){
62				?>
63					<li><a href="product.php?id=<?php echo $rec2['id']; ?>"><?php echo $rec2['category_name'];?></a></li>
64					<?php
65				}
66				?>
67				</ul>
68			</li>
69			<?php
70			}
71			?>
72		</ul>
73	</header>
74	<!----- /header ----->
75
76<script>
77	function checked_inspect(product_id) { //その商品がお気に入り登録されているかどうか確認する関数
78		fav = $.cookie("fav_item") ? JSON.parse($.cookie("fav_item")) : [];
79		console.log(fav);
80		console.log(product_id);
81		if (String(fav).indexOf(String(product_id)) > -1) {
82			$('#sumi_' + product_id).text('登録');
83			console.log('含まれている');
84			console.log('#sumi_' + product_id);
85		} else {
86			$('#sumi_' + product_id).text('済');
87			console.log('含まれていない');
88			console.log('#sumi_' + product_id);
89		}
90	}
91
92</script>
93<?php
94	$siteTitle = '商品ページ';
95
96	$category_id = $_GET['id'];
97
98	$sql2 = "SELECT id, product_name, img_pass,product_price from product where category_id = :category_id order by id";
99		
100	$params = array(':category_id' => $category_id);
101		
102	$stmt3 = sql_exec($dbh, $sql2, $params);
103		
104	$results3 = $stmt3->fetchAll(PDO::FETCH_ASSOC);
105
106	$number = 1;
107?>
108<!----- main ----->
109<div class="main">
110	<table class="product-corner">
111		<?php
112			if(count($results3)>0){
113				foreach($results3 as $rec3){
114					
115		?>
116		<script>
117			var product_id = <?php echo $rec3['id']; ?>;
118			checked_inspect(product_id);
119
120		</script>
121		<?php
122				if($number%3 == 1){
123				?>
124		<tr class="product-box">
125			<?php 
126				}
127				?>
128			<td class="product-item">
129				<img src="<?php echo $rec3['img_pass']; ?>" alt="" class="product-img">
130				<span class="product-name">
131					<?php echo $rec3['product_name'];
132				?>
133				</span>
134				<span class="product-price">
135					<?php echo '¥'.$rec3['product_price'].'(税込)';
136				?>
137				</span>
138				<div class="info-box">
139					<div id="<?php echo $rec3['id']; ?>" class="fav_button"><span class="__icon"></span><span class="__text">お気に入り<p id="sumi_<?php echo $rec3['id']; ?>"></p></span>
140					</div>
141					<button class="cart-in">
142						<select name="cnt">
143							<option value="1" selected>1</option>
144							<option value="2">2</option>
145							<option value="3">3</option>
146							<option value="4">4</option>
147							<option value="5">5</option>
148						</select>
149						カートに入れる
150					</button>
151				</div>
152			</td>
153			<?php
154				if($number/3 == 0 || count($results3) == $number){
155				?>
156		</tr>
157		<?php 
158				}
159				$number = $number + 1;
160				?>
161		<?php
162				}
163			}else{
164				echo '発売中の商品はありません。';
165			}
166		?>
167	</table>
168</div>
169<!----- /main ----->
170
171	<!----- footer ----->
172	<footer>©︎gokurakusyuzou 2001-2021</footer>
173	<!----- /footer ----->
174</body>
175
176</html>
177

設定関係の処理をまとめたfunction.php

php
1<?php
2
3ini_set("log_errors", "On");
4ini_set("error_log", "error.log");
5
6session_save_path("/var/tmp");
7ini_set('session.gc_maxlifetime',60*60*24*30);
8ini_set('session.cookie_lifetime',60*60*24*30);
9session_start();
10session_regenerate_id();
11
12// デバッグフラグ
13$debug_flg = true;
14// デバッグログ関数
15function debug($str){
16    global $debug_flg;
17    if(!empty($debug_flg)){
18        error_log('デバッグ：'.$str);
19    }
20}
21
22define('DB_USERNAME', 'root');
23define('DB_PASSWORD', 'root');
24define('DSN', 'mysql:host=localhost; dbname=paradise; charset=utf8');
25
26
27function db_connect(){
28    $dbh = new PDO(DSN, DB_USERNAME, DB_PASSWORD);
29    return $dbh;
30}
31
32function sql_exec($dbh,$query,$params){
33	$stmt = $dbh->prepare($query);
34	
35	if(!$stmt->execute($params)){
36		debug('SQL実行に失敗しました');
37		debug('失敗したSQL:'.print_r($stmt,true));
38		return 0;
39	}
40	debug('SQL成功');
41	debug('成功したSQL:'.print_r($stmt,true));
42	return $stmt;
43}
44
45?>

ドロップダウンメニューと商品のデータ

sql
1-- テーブルの構造 `category`
2--
3
4CREATE TABLE `category` (
5  `id` int(11) NOT NULL,
6  `category_name` varchar(255) NOT NULL,
7  `big_flg` tinyint(1) NOT NULL DEFAULT '0',
8  `big_id` int(11) NOT NULL
9) ENGINE=InnoDB DEFAULT CHARSET=utf8;
10
11--
12-- テーブルのデータのダンプ `category`
13--
14
15INSERT INTO `category` (`id`, `category_name`, `big_flg`, `big_id`) VALUES
16(1, '日本酒', 1, 0),
17(2, 'ビール', 1, 0),
18(3, 'おつまみ', 1, 0),
19(4, 'コーヒー', 1, 0),
20(5, '純米酒', 0, 1),
21(6, '果実酒', 0, 1),
22(7, '日本酒ギフト', 0, 1),
23(9, '瓶ビール', 0, 2),
24(10, '缶ビール', 0, 2),
25(11, 'ビールギフト', 0, 2),
26(12, 'エイヒレ', 0, 3),
27(13, 'ウインナー', 0, 3),
28(14, '奈良漬け', 0, 3),
29(15, 'ボトルコーヒー', 0, 4),
30(16, 'コーヒーギフト', 0, 4);
31
32-- --------------------------------------------------------
33
34--
35-- テーブルの構造 `product`
36--
37
38CREATE TABLE `product` (
39  `id` int(11) NOT NULL,
40  `product_name` varchar(255) NOT NULL,
41  `category_id` int(11) NOT NULL,
42  `img_pass` varchar(255) NOT NULL,
43  `product_price` int(11) NOT NULL
44) ENGINE=InnoDB DEFAULT CHARSET=utf8;
45
46--
47-- テーブルのデータのダンプ `product`
48--
49
50INSERT INTO `product` (`id`, `product_name`, `category_id`, `img_pass`, `product_price`) VALUES
51(1, '真野鶴', 5, 'http://localhost:8888/js_advance2/img/IMG_2870.jpeg', 500),
52(2, '奈良漬け詰め合わせ（牛蒡と瓜）', 14, 'http://localhost:8888/js_advance2/img/IMG_4652.jpeg', 700),
53(3, '福千歳', 7, 'http://localhost:8888/js_advance2/img/IMG_2906.jpeg', 600),
54(4, '奈良漬詰め合わせ（西瓜ときゅうり）', 14, 'http://localhost:8888/js_advance2/img/IMG_4651.jpeg', 700),
55(5, '櫻正宗', 5, 'http://localhost:8888/js_advance2/img/IMG_2946.jpeg', 500),
56(6, '金亀漬', 14, 'http://localhost:8888/js_advance2/img/IMG_2812.jpeg', 500),
57(7, '賀茂茄子の奈良漬け', 14, 'http://localhost:8888/js_advance2/img/IMG_6866.jpeg', 400);

checked_inspectメソッド内のconsole.logの内容が出力されていることからこのコードに到達していること
console.logで出力したpタグのidでhtml部分を検索し、
テキストを書き換えようとしているpタグがヒットしたことからidを.textメソッドに正しく渡せていることは
確認済です。

他に考えられる原因はどのようなものがあるでしょうか？

hatena19

2021/09/20 14:15

コードを省略せずに、実際に動作するものを提示してください。 fav とか product_id とか突然出てきますが、定義部分がないと動作しません。

m.ts10806

2021/09/20 21:27

JavaScriptじゃなくPHPで表示する情報を制御するものでは？ JavaScript側で対応しなければならないのはどういう理由ですか？

ttpk

2021/09/21 03:24

cookieの勉強中でjavascriptでcookieを取得、画面に表示する方法を教わったのでその方法で既にお気に入りに登録されているかをjavascriptで実装しようとしていました。・お気に入りをcookieに登録する処理・お気に入りに登録されているかを確認し、表示を変える処理を実装し、お気に入りボタンがクリックされた時にお気に入りをcookieに登録する処理が動きそこからお気に入りに登録されているかを確認し、表示を変える処理を呼び出すように実装しようとしていました。

ttpk

2021/09/21 03:38

phpからajaxで処理した方がいいですね

行動規範の内容に同意します

回答1件

ベストアンサー

<p id="sumi_<?php echo $rec3['id']; ?>"></p>という要素が生成する前にchecked_inspectをコールしています。

checked_inspectをコールするタイミングをpタグの後に変更すると大丈夫だと思います。

（追記）
他の方がおっしゃっているようにお気に入りもPHPで出力する方がよいかと思います。

投稿2021/09/21 00:06

編集2021/09/21 00:08

tabuu

総合スコア2480

ttpk

2021/09/21 03:23

順番を変えたところテキストが書き変わることを確認できました！ありがとうございました。 cookieの勉強中でjavascriptでcookieを取得、画面に表示する方法を教わったのでその方法で既にお気に入りに登録されているかをjavascriptで実装しようとしていました。・お気に入りをcookieに登録する処理・お気に入りに登録されているかを確認し、表示を変える処理を実装し、お気に入りボタンがクリックされた時にお気に入りをcookieに登録する処理が動きそこからお気に入りに登録されているかを確認し、表示を変える処理を呼び出すように実装しようとしていました。

ttpk

2021/09/21 03:38

phpからajaxで処理した方がいいですね

行動規範の内容に同意します