ボタンに直接設定すればaタグは要らないですね
こんな感じで
PHP
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3 Array.prototype.forEach.call(document.querySelectorAll('.contents input[type=button][value=購入]'),function(x){
4 x.addEventListener('click',function(e){
5 var v=e.target.parentNode.querySelector('input[type=hidden][name=name]').value;
6 console.log(v);
7 });
8 });
9});
10</script>
11<?PHP
12
13$list=json_decode('[
14 {"image":"hoge1.jpg","title":"hoge1","name":"fuga1"},
15 {"image":"hoge2.jpg","title":"hoge2","name":"fuga2"},
16 {"image":"hoge3.jpg","title":"hoge3","name":"fuga3"}
17]');
18?>
19<div class="contents">
20<ul>
21<?php foreach ($list as $data) { ?>
22<li class="contents_li">
23<img class="contents_image" src="<?php echo $data->image ?>"/>
24<p class="contents_title"><?php echo $data->title; ?></p>
25<input type="button" value="購入">
26<input type="hidden" name="name" value="<?php echo $data->name ?>">
27</li>
28<?php } ?>
29</ul>
30</div>
追記
hiddenをつかわないでdata-*の方が汎用性は高いですね
PHP
1<script>
2document.addEventListener('click',function(e){
3 var t=e.target;
4 if(t.nodeName=="INPUT" && t.type=="button" && t.value=="購入"){
5 console.log(t.dataset["name"]);
6 }
7});
8</script>
9<?PHP
10
11$list=[
12 (Object) ["image"=>"hoge1.jpg","title"=>"hoge1","name"=>"fuga1"],
13 (Object) ["image"=>"hoge2.jpg","title"=>"hoge2","name"=>"fuga2"],
14 (Object) ["image"=>"hoge3.jpg","title"=>"hoge3","name"=>"fuga3"]
15];
16?>
17<div class="contents">
18<ul>
19<?php foreach ($list as $data) { ?>
20<li class="contents_li">
21<img class="contents_image" src="<?php echo $data->image ?>"/>
22<p class="contents_title"><?php echo $data->title; ?></p>
23<input type="button" value="購入" data-name="<?php echo $data->name ?>">
24</li>
25<?php } ?>
26</ul>
27</div>
datasetが利用できないブラウザが対象の場合は
getAttribute("data-name")のような書き方をしてください
複数のデータを渡す
ひとつはそれぞれdata-*形式で値をわたしてやること
PHP
1<input type="button" value="購入" data-name="<?php echo $data->name; ?>" data-title="<?php echo $data->title; ?>">
javascript
1console.log(t.dataset["name"]);
2console.log(t.dataset["title"]);
もう一つは、JSON形式で渡してやること
PHP
1 <input type="button" value="購入" data-list='<?php echo '{"name":"'.$data->name.'","title":"'.$data->title.'"}'; ?>'>
2/* 改良版 */
3 <input type="button" value="購入" data-list="<?php echo htmlspecialchars(json_encode(["name"=>$data->name,"title"=>$data->title]));?>"></li>
この場合受けとった側はパースしてやる必要があります
javascript
1 console.log(JSON.parse(t.dataset["list"]));
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/09 07:28
2018/03/09 07:45
2018/03/09 08:01