忘れそうなのでメモ - yamanetoshi's diary

昨晩の

<p id="content_{{ item.id }}" style="display:none">
 {{ item.content|safe }}
</p>
<button onclick="execute()">読む</button>

は微妙。ってか content_{{ item.id }} を execute な function に渡す必要あり。

<script type="text/javascript"> 
function execute(id) { 
    var item = $(id); 
    Element.toggle(item); // 表示→非表示、非表示→表示 
}

みたいなコトってできるんだろうか、と。
とりあえず今から買い物行くみたいなので帰宅後に簡単なサンプルで試験予定ッス。

続き

帰宅後、実装及び試験実施。とりあえず以下なソレで動作を確認。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Element.toggle</title>
</head>

<script type="text/javascript" src="./prototype-1.6.0.2.js"></script>
<script type="text/javascript">
function execute1() {
	var item = $('sample1');
	Element.toggle(item);
}
</script>
<script type="text/javascript">
function execute2() {
	var item = $('sample2');
	Element.toggle(item);
}
</script>
<body>
<p>
<button onclick="execute1()">トグル (1)</button>
<div id="sample1" style="background-color:red; display:none">element1</div>
</p>
<p>
<button onclick="execute2()">トグル (2)</button>
<div id="sample2" style="background-color:red; display:none">element2</div>
</p>
</body>

</html>

微妙。引数渡せるはずだが、と言いつつ以下は??

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Element.toggle</title>
</head>

<script type="text/javascript" src="./prototype-1.6.0.2.js"></script>
<!--
<script type="text/javascript" src="./protoculous-1.0.2.js"></script>
-->
<script type="text/javascript">
function execute(arg) {
	var item = $(arg);
	Element.toggle(item);
}
</script>
<body>
<p>
<button onclick="execute('sample1')">トグル (1)</button>
<div id="sample1" style="background-color:red; display:none">element1</div>
</p>
<p>
<button onclick="execute('sample2')">トグル (2)</button>
<div id="sample2" style="background-color:red; display:none">element2</div>
</p>
</body>

</html>

動いた。とりあえず Reading Gauche 方面に去ります。