回答編集履歴
4
調整
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
ボタンに直接
|
|
1
|
+
ボタンに直接設定すればaタグは要らないですね
|
|
2
2
|
|
|
3
3
|
こんな感じで
|
|
4
4
|
|
|
@@ -168,6 +168,10 @@
|
|
|
168
168
|
|
|
169
169
|
<input type="button" value="購入" data-list='<?php echo '{"name":"'.$data->name.'","title":"'.$data->title.'"}'; ?>'>
|
|
170
170
|
|
|
171
|
+
/* 改良版 */
|
|
172
|
+
|
|
173
|
+
<input type="button" value="購入" data-list="<?php echo htmlspecialchars(json_encode(["name"=>$data->name,"title"=>$data->title]));?>"></li>
|
|
174
|
+
|
|
171
175
|
```
|
|
172
176
|
|
|
173
177
|
この場合受けとった側はパースしてやる必要があります
|
3
追記
test
CHANGED
|
@@ -137,3 +137,43 @@
|
|
|
137
137
|
datasetが利用できないブラウザが対象の場合は
|
|
138
138
|
|
|
139
139
|
getAttribute("data-name")のような書き方をしてください
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
# 複数のデータを渡す
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
ひとつはそれぞれdata-*形式で値をわたしてやること
|
|
148
|
+
|
|
149
|
+
```PHP
|
|
150
|
+
|
|
151
|
+
<input type="button" value="購入" data-name="<?php echo $data->name; ?>" data-title="<?php echo $data->title; ?>">
|
|
152
|
+
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
```javascript
|
|
156
|
+
|
|
157
|
+
console.log(t.dataset["name"]);
|
|
158
|
+
|
|
159
|
+
console.log(t.dataset["title"]);
|
|
160
|
+
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
もう一つは、JSON形式で渡してやること
|
|
166
|
+
|
|
167
|
+
```PHP
|
|
168
|
+
|
|
169
|
+
<input type="button" value="購入" data-list='<?php echo '{"name":"'.$data->name.'","title":"'.$data->title.'"}'; ?>'>
|
|
170
|
+
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
この場合受けとった側はパースしてやる必要があります
|
|
174
|
+
|
|
175
|
+
```javascript
|
|
176
|
+
|
|
177
|
+
console.log(JSON.parse(t.dataset["list"]));
|
|
178
|
+
|
|
179
|
+
```
|
2
調整
test
CHANGED
|
@@ -98,15 +98,15 @@
|
|
|
98
98
|
|
|
99
99
|
|
|
100
100
|
|
|
101
|
-
$list=
|
|
101
|
+
$list=[
|
|
102
102
|
|
|
103
|
-
|
|
103
|
+
(Object) ["image"=>"hoge1.jpg","title"=>"hoge1","name"=>"fuga1"],
|
|
104
104
|
|
|
105
|
-
|
|
105
|
+
(Object) ["image"=>"hoge2.jpg","title"=>"hoge2","name"=>"fuga2"],
|
|
106
106
|
|
|
107
|
-
|
|
107
|
+
(Object) ["image"=>"hoge3.jpg","title"=>"hoge3","name"=>"fuga3"]
|
|
108
108
|
|
|
109
|
-
]
|
|
109
|
+
];
|
|
110
110
|
|
|
111
111
|
?>
|
|
112
112
|
|
1
dataset
test
CHANGED
|
@@ -67,3 +67,73 @@
|
|
|
67
67
|
</div>
|
|
68
68
|
|
|
69
69
|
```
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
# 追記
|
|
74
|
+
|
|
75
|
+
hiddenをつかわないでdata-*の方が汎用性は高いですね
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
```PHP
|
|
80
|
+
|
|
81
|
+
<script>
|
|
82
|
+
|
|
83
|
+
document.addEventListener('click',function(e){
|
|
84
|
+
|
|
85
|
+
var t=e.target;
|
|
86
|
+
|
|
87
|
+
if(t.nodeName=="INPUT" && t.type=="button" && t.value=="購入"){
|
|
88
|
+
|
|
89
|
+
console.log(t.dataset["name"]);
|
|
90
|
+
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
<?PHP
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
$list=json_decode('[
|
|
102
|
+
|
|
103
|
+
{"image":"hoge1.jpg","title":"hoge1","name":"fuga1"},
|
|
104
|
+
|
|
105
|
+
{"image":"hoge2.jpg","title":"hoge2","name":"fuga2"},
|
|
106
|
+
|
|
107
|
+
{"image":"hoge3.jpg","title":"hoge3","name":"fuga3"}
|
|
108
|
+
|
|
109
|
+
]');
|
|
110
|
+
|
|
111
|
+
?>
|
|
112
|
+
|
|
113
|
+
<div class="contents">
|
|
114
|
+
|
|
115
|
+
<ul>
|
|
116
|
+
|
|
117
|
+
<?php foreach ($list as $data) { ?>
|
|
118
|
+
|
|
119
|
+
<li class="contents_li">
|
|
120
|
+
|
|
121
|
+
<img class="contents_image" src="<?php echo $data->image ?>"/>
|
|
122
|
+
|
|
123
|
+
<p class="contents_title"><?php echo $data->title; ?></p>
|
|
124
|
+
|
|
125
|
+
<input type="button" value="購入" data-name="<?php echo $data->name ?>">
|
|
126
|
+
|
|
127
|
+
</li>
|
|
128
|
+
|
|
129
|
+
<?php } ?>
|
|
130
|
+
|
|
131
|
+
</ul>
|
|
132
|
+
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
datasetが利用できないブラウザが対象の場合は
|
|
138
|
+
|
|
139
|
+
getAttribute("data-name")のような書き方をしてください
|