ホームページ作成　title 属性を保持したい

解決済

質問者：issan55
質問日時：2011/12/20 18:41
回答数：2件

初心者ですが、jQueryやJavaScriptなどの初心者用ページを見ながら、目的とするページができるように見よう見まねでコピペしてなんとか作っています。
やりたいこと

(1)　問題の空欄にカーソルを当てると答が出現すること。
(2)　問題をソートすること。

ここまではできましたが、ソートするとポップアップの属性が消えてしまい、小さな字になってしまいます。
ソートしてももとの属性で大きな字で出したいのです。

ページを見てもらったほうがいいかと思いアドレスを載せておきます。ご検討ください。

http://issangogo.sakura.ne.jp/weblib2011-1-2/nar …

以下は記述文です

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript" src="js/jquery.balloon.js"></script>
<title>時計</title>

<script>

var tds = [
["This clock is ten minutes <a title='slow'>(________)</a>.<br>この時計は１０分遅れている","","　　　"],
["This clock is ten minutes <a title='fast'>(________).<br>この時計は１０分進んでいる","","　　　"],
["This clock <a title='loses'>(________) a minute a day.<br>この時計は１日に１分遅れる","","　　　　"],
["This clock <a title='gains'>(________) a minute a day.<br>この時計は１日に１分進む","","　　　　"]

];

$(function() {
function draw() {
var tag = '';
$.each(tds, function(i, val) {
tag += '<tr><td>'+ val[0] + '</td><td>' + val[1] + '</td><td>' + val[2] + '</td></tr>';
});
$('tbody').html(tag);
}
$('th').click(function() {
var arrow = $('span', this);
var col = $('th').index(this);

tds.sort(function(a, b) { return Math.random() < Math.random() ? -1 : 1; });

$(this).siblings().find('span').html('');
draw();
});
draw();

});
</script>

<style>
th, td {
border: 1px solid black;
padding: 2px;
}
th {
background-color: #ccc;
cursor: pointer;
}
</style>

<style type="text/css">


</style>

<script type="text/javascript">
$(function(){

// 全要素をからTITLE属性を持っている要素だけに絞る
$("body *").filter(function(){
return this.title && this.title.length>0;
}).each(function(){
// TITLE属性を持っている要素に適用する

// あとで使う
var self = $(this), title = self.attr("title");

// TITLE属性を持っている要素にhover()で
self.hover(

// mouseover
function(e){ // このeはevent自体を意味する

// TITLEがあるとブラウザのチップが出るので一時的に空にしておく
self.attr("title","");

// とりあえず表示するtip要素を生成しておく
$("body").append("<div id='title-tip'>"+title+"</div>");
$("#title-tip").css({
position: "absolute",

// e.pageX(Y)でカーソルが要素に乗った時点でのX(Y)座標を取得する
top: e.pageY+(-15), // カーソルと表示したtipが重なるとチラつくので少

しずらす
left: e.pageX+15
});
},

// mouseout
function(){

// mouseoverで空にしたTITLEを戻す
self.attr("title",title);

// 要素から離れた場合はtipを非表示にして削除しておく
$("#title-tip").hide().remove();
}
);

// 要素上でカーソルが移動した場合は、逐一tipの位置を変える
self.mousemove(function(e){
$("#title-tip").css({
top: e.pageY+(-15),
left: e.pageX+15
});
});
});

});
</script>

</head>

<body bgcolor="YellowGreen">

<font size=5>

<table><thead><tr><th>問　題　ソート<span></span></th><th>__ヒント１__<span></span></th><th>___ヒント２

___<span></span></th></tr></thead><tbody></tbody></table>

</font>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： e_watt
回答日時：2011/12/22 05:10

＞ソートするとポップアップの属性が消えてしまい、

ソートするときに
＞$('tbody').html(tag);
で、文字列を代入してDOMツリーを作り直しているから、
ポップアップの属性は改めて付け直す必要がありますね。

私は実はjQueryを全然知らないので以下は最適解ではないかも知れませんが…

＞<script type="text/javascript">
＞$(function(){
＞// 全要素をからTITLE属性を持っている要素だけに絞る

の部分を名前付きの関数にして、draw()の中で

＞ $('tbody').html(tag);
＞ addTitleProp();　　　// ←命名した関数を毎度呼ぶ

という具合に呼び出してやれば、期待に沿った動作にはなったようです。

- 0
- 件

通報する

この回答へのお礼

e wattさん

ご回答有難う御座います。

いろいろと試して見ましたが、素人のため、うまくいきません。
draw()を使ってもう一度記述するのだろうということはわかるのですが、
関数をすべて書き直す方法が、よくわかりません。

たとえば

＞＞<script type="text/javascript">
＞＞$(function(){
＞＞// 全要素をからTITLE属性を持っている要素だけに絞る

＞の部分を名前付きの関数にして、draw()の中で

について、名前付きの関数にする方法がよくわかりません。

$(function(){ を　$(function TitleProp(){

とすればよいのでしょうか。

また、

＞ $('tbody').html(tag);
＞ addTitleProp();　　　// ←命名した関数を毎度呼ぶ

このTitleProp が関数名と考えて良いのでしょうか。

このように考えて、いろいろなところに記述して見ましたが、うまく動作しません。
関数名の記述およびadd関数の記述場所についてアドバイスをお願いします。

通報する

お礼日時：2011/12/22 17:47

No.2ベストアンサー

回答者： e_watt
回答日時：2011/12/22 19:09

(行番号は質問文中のURLのソースのものです。

)

まず、title属性を持っている要素を書き換える関数について。
72行目から123行目までの無名関数全体が、 $( ) で囲われています。
この様子を3行に圧縮するとこんな感じです。

<script type="text/javascript">
$(　function(){ <ここに約50行分の本体> }　);
</script>

これを、$() でくくるのをやめて、名前を付けます。

_71:　<script type="text/javascript">
_72:　　function addTitleProp() {　　　　　// 頭の "$(" を削って適当な名前を付ける
　　　　　　　(....関数の中身はそのまま)
123:　　}　　　　　　　　　　　　　　　　　// 末尾の ");" を削る
124:　</script>

問題文をテーブルで表示させる部分(tbodyに突っ込んでいる部分)が25行目にあるので

_25:　　$('tbody').html(tag);
_26:　　addTitleProp();　　　　　　// ←この行を追加して関数を呼ぶ

変更点は以上です。

※ただし、もしかすると jQuery の流儀に則るには $( ); で囲ったまま
　なんとかするように書くべきなのかもしれません。