jQueryで処理するならアンカータグにコードを埋め込まないほうがよいでしょう
ちなみにHTMLをきちんと書かないとうまく要素を参照できないので注意してください
css
1input[type=checkbox] + div{display:none;}
2input[type=checkbox]:checked + div{display:block;}
3
javascript
1$(function(){
2 $('div.oo-cont2').find('a').on('click',function(){
3 $(this).parents('td').find('label').attr('for',function(index,prop){return (r=prop.match(/^stop_(.+?)$/))?r[1]:"stop_"+prop});
4 });
5});
6
HTML
1<table>
2<tr>
3<td colspan="3">
4<div class="objectopen">
5<label for="oo-cap1">
6<img src="xxx.png">テストボタン1</a>
7</label>
8<a href="">テストボタン2</a>
9</div>
10<input id="oo-cap1" type="checkbox">
11<div class="oo-cont2">
12<a href="#">キャンセル</a><a href="#">登録</a>
13</div>
14</td>
15</tr>
16<tr>
17<td colspan="3">
18<div class="objectopen">
19<label for="oo-cap2">
20<img src="xxx.png">テストボタン1</a>
21</label>
22<a href="">テストボタン2</a>
23</div>
24<input id="oo-cap2" type="checkbox">
25<div class="oo-cont2">
26<a href="#">キャンセル</a><a href="#">登録</a>
27</div>
28</td>
29</tr>
30<tr>
31<td colspan="3">
32<div class="objectopen">
33<label for="oo-cap3">
34<img src="xxx.png">テストボタン1</a>
35</label>
36<a href="">テストボタン2</a>
37</div>
38<input id="oo-cap3" type="checkbox">
39<div class="oo-cont2">
40<a href="#">キャンセル</a><a href="#">登録</a>
41</div>
42</td>
43</tr>
44</table>
まとめたVer
以下、そのままHTMLにコピペしてみてください
仕様:
- テストボタン1,3,5および隣の画像をおすと、チェックボックスがチェックされて「キャンセル」「登録」が表示される
- もう一度押すと、チェックボックスが外れて表示が消える
- 「キャンセル」「登録」が表示されている状態で、どちらかをクリックすると、テストボタンや画像をクリックしても閉じなくなる
- 「キャンセル」「登録」をもう一度おすと閉じることができるようになる
上記仕様ではないようでしたらどういう挙動を想定しているか指示してください
HTML
1<style>
2input[type=checkbox] + div{display:none;}
3input[type=checkbox]:checked + div{display:block;}
4</style>
5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
6<script>
7$(function(){
8 $('div.oo-cont2').find('a').on('click',function(){
9 $(this).parents('td').find('label').attr('for',function(index,prop){return (r=prop.match(/^stop_(.+?)$/))?r[1]:"stop_"+prop});
10 });
11});
12</script>
13<table>
14<tr>
15<td colspan="3">
16<div class="objectopen">
17<label for="oo-cap1">
18<img src="xxx.png">テストボタン1</a>
19</label>
20<a href="">テストボタン2</a>
21</div>
22<input id="oo-cap1" type="checkbox">
23<div class="oo-cont2">
24<a href="#">キャンセル</a><a href="#">登録</a>
25</div>
26</td>
27</tr>
28<tr>
29<td colspan="3">
30<div class="objectopen">
31<label for="oo-cap2">
32<img src="xxx.png">テストボタン3</a>
33</label>
34<a href="">テストボタン4</a>
35</div>
36<input id="oo-cap2" type="checkbox">
37<div class="oo-cont2">
38<a href="#">キャンセル</a><a href="#">登録</a>
39</div>
40</td>
41</tr>
42<tr>
43<td colspan="3">
44<div class="objectopen">
45<label for="oo-cap3">
46<img src="xxx.png">テストボタン5</a>
47</label>
48<a href="">テストボタン6</a>
49</div>
50<input id="oo-cap3" type="checkbox">
51<div class="oo-cont2">
52<a href="#">キャンセル</a><a href="#">登録</a>
53</div>
54</td>
55</tr>
56</table>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/14 05:42
退会済みユーザー
2016/10/14 07:21
2016/10/14 07:32
退会済みユーザー
2016/10/14 09:25