質問編集履歴
1
HTMLのコードを追記し、coffeescriptをjavascriptに変換しコードを再掲しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,28 +1,56 @@
|
|
|
1
1
|
こんにちは！
|
|
2
2
|
|
|
3
|
-
jQueryを用いてクリック時にtooltipを持つdiv要素を追加させるコードを書いています。
|
|
3
|
+
jQueryを用いてform要素のボタンをクリック時にtooltipを持つdiv要素を追加させるコードを書いています。
|
|
4
4
|
tooltipは常に表示させる状態にしているのですが、div要素を複数個追加した場合（例えばdiv1,div2,div3とします）div1のみtooltipが表示され、div2とdiv3にはtooltipが表示されず、div1が削除された場合にdiv2にのみtooltipが表示されてしまいます。
|
|
5
5
|
|
|
6
6
|
全ての追加したdiv要素に対して、常にtooltipを表示させるためにはどのようにすればよろしいでしょうか？
|
|
7
|
-
tooltipはbootstrapのものを利用しており、coffeescriptでコードを記述しています。以下は私の書いたコードです。
|
|
7
|
+
tooltipはbootstrapのものを利用しており、coffeescriptでコードを記述しています。以下は私の書いたコードです。（＊追記：回答者のユーザー様からcoffeescriptをjsに変更してほしいとの要望があり、jsに変換しています）
|
|
8
8
|
|
|
9
9
|
|
|
10
|
+
コードは以下です
|
|
11
|
+
```HTML
|
|
12
|
+
<div class="mmbox">
|
|
13
|
+
<form>
|
|
14
|
+
<input id="box" type="text" placeholder="名前を入力"><br>
|
|
15
|
+
<p><a id="box" class="btn btn-primary btn-lg" role="button">投稿</a></p>
|
|
16
|
+
</div>
|
|
10
17
|
|
|
18
|
+
<div id="box">
|
|
19
|
+
</div>
|
|
20
|
+
```
|
|
11
21
|
|
|
12
22
|
|
|
13
|
-
|
|
23
|
+
```javascript
|
|
14
|
-
$("a#box").click (e) ->
|
|
15
24
|
|
|
16
|
-
value = $('input#box').val()
|
|
17
25
|
|
|
18
|
-
[x, y] = positionOfNewBlock(e)
|
|
19
|
-
block = $("<div id ='tooltip' class='dot #{value}' data-placement='bottom' data-toggle='tooltip' title= #{value} style='left: #{x}px; top: #{y}px;' />").
|
|
20
|
-
draggable({ containment: "parent" }).css({ position: "absolute" })
|
|
21
|
-
$('div#box').append(block)
|
|
22
|
-
$('#tooltip').tooltip('show')
|
|
23
26
|
|
|
27
|
+
|
|
28
|
+
var positionOfNewBlock;
|
|
29
|
+
|
|
30
|
+
$(function() {
|
|
31
|
+
return $("a#box").click(function(e) {
|
|
32
|
+
var block, ref, value, x, y;
|
|
33
|
+
value = $('input#box').val();
|
|
34
|
+
ref = positionOfNewBlock(e), x = ref[0], y = ref[1];
|
|
35
|
+
block = $("<div id ='tooltip' class='dot " + value + "' data-placement='bottom' data-toggle='tooltip' title= " + value + " style='left: " + x + "px; top: " + y + "px;' />").draggable({
|
|
36
|
+
containment: "parent"
|
|
37
|
+
}).css({
|
|
38
|
+
position: "absolute"
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
$('div#box').append(block);
|
|
42
|
+
return $('#tooltip').tooltip('show');
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
});
|
|
46
|
+
|
|
24
|
-
positionOfNewBlock = (e)
|
|
47
|
+
positionOfNewBlock = function(e) {
|
|
48
|
+
var canvas, x, y;
|
|
25
|
-
canvas = $('div#box')
|
|
49
|
+
canvas = $('div#box');
|
|
26
|
-
x = 300
|
|
50
|
+
x = 300;
|
|
27
|
-
y = 100
|
|
51
|
+
y = 100;
|
|
28
|
-
[x, y]
|
|
52
|
+
return [x, y];
|
|
53
|
+
};
|
|
54
|
+
```
|
|
55
|
+
プログラミングに関して、ど素人の状態ですが、、、
|
|
56
|
+
どうぞよろしくお願いいたします。
|