私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレJavaScript ライブラリ総合質問所 vol.4
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
スクロールエリアでスワイプのイベントをとらえたいのですが
どのようにすればできるでしょうか。
下記のようなソースではできませんでした。
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollswipe').bind('swipe', function(){
alert("swipe");
});
});
</script>
</head>
<body>
<div id="scrollswipe" style="width:200px; height:200px; overflow:scroll;">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
<h1>cccccccccccccccccccccccccccccccccccccccccccc</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</body>
</html>
どのようにすればできるでしょうか。
下記のようなソースではできませんでした。
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollswipe').bind('swipe', function(){
alert("swipe");
});
});
</script>
</head>
<body>
<div id="scrollswipe" style="width:200px; height:200px; overflow:scroll;">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
<h1>cccccccccccccccccccccccccccccccccccccccccccc</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</body>
</html>
$(document).ready(function(){
これは冗長
$(function(){
こう書けば良い。
あとHTML5なら type="text/javascript" は不要。
これは冗長
$(function(){
こう書けば良い。
あとHTML5なら type="text/javascript" は不要。
バージョンを最新の1.4.3にして、
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
$(document).ready(function(){ の次の行あたりに
$.event.special.swipe.scrollSupressionThreshold = 10;
を追加。
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
$(document).ready(function(){ の次の行あたりに
$.event.special.swipe.scrollSupressionThreshold = 10;
を追加。
>>208-209
ありがとうございます！
ありがとうございます！
onscrollイベントの中で、スクロールした座標軸の種類を知ることは出来ないのでしょうか？
座標軸と、移動量を知りたいのですが
座標軸と、移動量を知りたいのですが
onscrollイベントのたびに座標をcheckして自分で検出するしかないでしょうか？
>>213
そうですね
そうですね
>>209はcloneもいらんし。
なんでこう無駄なコード書くかなー。
なんでこう無駄なコード書くかなー。
idがabcのtrタグ内にある、nameが_defで終わるタグをリストしたい。
一番スマートな方法は？
<tr id="abc">
<td><input name="fas_def" /></td>
<td><input name="sec_def" /></td>
<td><input name="thr" /></td>
<td><input name="fou_def" /></td>
<td><input name="fif" /></td>
<td><input name="six_def" /></td>
</tr>
一番スマートな方法は？
<tr id="abc">
<td><input name="fas_def" /></td>
<td><input name="sec_def" /></td>
<td><input name="thr" /></td>
<td><input name="fou_def" /></td>
<td><input name="fif" /></td>
<td><input name="six_def" /></td>
</tr>
まちがえた！
nameが_defで終わるタグをリストしたい。
↓
nameが_defで終わるnameをリストしたい。
nameが_defで終わるタグをリストしたい。
↓
nameが_defで終わるnameをリストしたい。
こんな感じの配列がゲットしたい！
@q = ('fas_def','sec_def','fou_def','six_def')
@q = ('fas_def','sec_def','fou_def','six_def')
>>218
querySelectorAll
querySelectorAll
ｊQuery初心者で勉強中の者です。
http://calie.jp/beashow/index.htmlのサイトのような
画像を読み込んだら自動で画像がフェードインしエフェクトが動く動きを実現するには
jquery.inview.jsとjquery.easing.1.3.js
が必要だということはわかったのですが、どのように記述すれば実現できるのかがわかりません。
画像をよみこんでフェードインさせた画像を左右上下にエフェクトをかけて表示させる方法を詳しい方ご教授いただけないでしょうか
画像をフェードインさせるところまでは一人でできました。→ttp://aruearoe.com/
http://calie.jp/beashow/index.htmlのサイトのような
画像を読み込んだら自動で画像がフェードインしエフェクトが動く動きを実現するには
jquery.inview.jsとjquery.easing.1.3.js
が必要だということはわかったのですが、どのように記述すれば実現できるのかがわかりません。
画像をよみこんでフェードインさせた画像を左右上下にエフェクトをかけて表示させる方法を詳しい方ご教授いただけないでしょうか
画像をフェードインさせるところまでは一人でできました。→ttp://aruearoe.com/
jqueryで
プラグインで追加されたメソッドの一覧を知る方法ありますか？
プラグインで追加されたメソッドの一覧を知る方法ありますか？
まず、クリックされたh3をセレクトできないと始まらないが
「クリックされた要素」はどうやってセレクトする？
その上で p すべてとは、
pの個数は決まってるのか？
pは連続しているのか？
「クリックされた要素」はどうやってセレクトする？
その上で p すべてとは、
pの個数は決まってるのか？
pは連続しているのか？
>>229
ありがとうございます。
pの個数は決まっていません。
pは連続しています。つまりh3の下にはpが連続して出現し、
またh3が来ます。
隠したいのは次のh3が出現するまでp全てということです。
クリックされたh3はクリックイベントの中の$(this)で取得しようと
思っていましたが、ダメでしょうか？
ありがとうございます。
pの個数は決まっていません。
pは連続しています。つまりh3の下にはpが連続して出現し、
またh3が来ます。
隠したいのは次のh3が出現するまでp全てということです。
クリックされたh3はクリックイベントの中の$(this)で取得しようと
思っていましたが、ダメでしょうか？
なんとか自己解決しました。
クリックされたh3を$(this)でとりまして、
var next = $(this).nextAll(); でh3以降の要素をすべて取得します。
nextをeach() で回して、p だったら hide() して、h3が出現したら
return falseでeachを出ます。
これで狙った挙動を実現できました。
やりたいことをここに書いていたら、アイデアが出ました。
ありがとうございます。
クリックされたh3を$(this)でとりまして、
var next = $(this).nextAll(); でh3以降の要素をすべて取得します。
nextをeach() で回して、p だったら hide() して、h3が出現したら
return falseでeachを出ます。
これで狙った挙動を実現できました。
やりたいことをここに書いていたら、アイデアが出ました。
ありがとうございます。
>>232
普通はそれが正しい。
普通はそれが正しい。
>>236
動的に内容が変更されるイベントにフックして $(this).prepend('bb'); すればいいだけだと思うけど
動的に内容が変更されるイベントにフックして $(this).prepend('bb'); すればいいだけだと思うけど
this じゃ無理か
イベントを貼り付けた要素にも依るが、event.target.ownerDocument あたりか
> phpのページ送り（URL、パラメーターは変更なし）のボタンをクリックすると
動的変更でもURL、パラメータは変更すべきでは？
イベントを貼り付けた要素にも依るが、event.target.ownerDocument あたりか
> phpのページ送り（URL、パラメーターは変更なし）のボタンをクリックすると
動的変更でもURL、パラメータは変更すべきでは？
>>236
答えじゃないが、コードが冗長だよ。無駄が多すぎ。
> $(document).ready(function(){
> $('.aa').each(function () {
> $(this).prepend('bb');
> });
> });
readyは、$(function()・・・と書くのが推奨されたやり方
$(function(){
$('.aa').each(function () {
$(this).prepend('bb');
});
});
eachで回してthisとか意味ない。
$(function(){
$('.aa').prepend('bb');
});
答えじゃないが、コードが冗長だよ。無駄が多すぎ。
> $(document).ready(function(){
> $('.aa').each(function () {
> $(this).prepend('bb');
> });
> });
readyは、$(function()・・・と書くのが推奨されたやり方
$(function(){
$('.aa').each(function () {
$(this).prepend('bb');
});
});
eachで回してthisとか意味ない。
$(function(){
$('.aa').prepend('bb');
});
質問の内容は実は
wordpressのFAQManagerというプラグインでの話になります。
動的変化した後のページにパラメーターがないというのは厳密には間違いでした。
2頁目に行ってもブラウザのアドレス欄のURLは変更なし（パラメーターも付いていない）
のですが、2ページ目のリンクをクリックするときのURLを見たら
パラメーターが付いてました。
http://ドメイン/?p=183/?faq_page=2 のようなカタチです。
だいぶ強引ですが、リンクをクリックした際にクリックイベントで.prepend()を
してみたのですが効きませんでした（クリックした瞬間だけ一瞬効きます）
wordpressのFAQManagerというプラグインでの話になります。
動的変化した後のページにパラメーターがないというのは厳密には間違いでした。
2頁目に行ってもブラウザのアドレス欄のURLは変更なし（パラメーターも付いていない）
のですが、2ページ目のリンクをクリックするときのURLを見たら
パラメーターが付いてました。
http://ドメイン/?p=183/?faq_page=2 のようなカタチです。
だいぶ強引ですが、リンクをクリックした際にクリックイベントで.prepend()を
してみたのですが効きませんでした（クリックした瞬間だけ一瞬効きます）
>>242
そうなのかもしれません。
処理後に prependをどうやったらかけれるのかがわからなくて・・。
試しにページャーの数字をクリックしたらページリロードするようにしたら
何頁目が表示されていようが1頁目が表示されるようになるだけでしたｗ
そうなのかもしれません。
処理後に prependをどうやったらかけれるのかがわからなくて・・。
試しにページャーの数字をクリックしたらページリロードするようにしたら
何頁目が表示されていようが1頁目が表示されるようになるだけでしたｗ
>>244
どんなソースかもわからない状態で
わかる範囲でのベストなお答えいただき有難うございました。
phpのコールバックをｊＱｕｅｒｙで受け取るなど自分には敷居が高いので
別の方法を模索してみます
ありがとうございました
どんなソースかもわからない状態で
わかる範囲でのベストなお答えいただき有難うございました。
phpのコールバックをｊＱｕｅｒｙで受け取るなど自分には敷居が高いので
別の方法を模索してみます
ありがとうございました
<script type="text/javascript">
var area = "";
function eachFunc(index, elem) {
if($(elem).find("input").attr("checked")){
var text = $(elem).find("span").html();
area = area + text;
}
}
$(function() {
$("button").click(function(){
$(".test").each(eachFunc);
$("textarea").val(area);
})
});
</script>
<div class="test">
<input type='checkbox' name='sou' value='sou' checked />
<span>テスト１<br /><br /></span>
</div>
<div class="test">
<input type='checkbox' name='sou' value='sou' checked />
<span>テスト２</span>
</div>
チェックボックスがONのspanからHTMLを取り出し、テキストエリアに入れたいのですが、ON・OFF関係なくすべてテキストエリアに入ってしまいます。
たぶんif文が悪いんだと思うんですけど、どうすればいいですか？
var area = "";
function eachFunc(index, elem) {
if($(elem).find("input").attr("checked")){
var text = $(elem).find("span").html();
area = area + text;
}
}
$(function() {
$("button").click(function(){
$(".test").each(eachFunc);
$("textarea").val(area);
})
});
</script>
<div class="test">
<input type='checkbox' name='sou' value='sou' checked />
<span>テスト１<br /><br /></span>
</div>
<div class="test">
<input type='checkbox' name='sou' value='sou' checked />
<span>テスト２</span>
</div>
チェックボックスがONのspanからHTMLを取り出し、テキストエリアに入れたいのですが、ON・OFF関係なくすべてテキストエリアに入ってしまいます。
たぶんif文が悪いんだと思うんですけど、どうすればいいですか？
自己解決しました
なるほど、この場合「off」というクラス名が最初に存在しないので$('.off').click()が処理できないということですね
これを踏まえて構成を考え直したら、やりたいことが実現できました。ありがとうございました
これを踏まえて構成を考え直したら、やりたいことが実現できました。ありがとうございました
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- JavaScript ライブラリ総合質問所 vol.5 (344) - [97%] - 2022/3/14 17:45
- jQuery ライブラリ 総合質問所 vol.4 (986) - [78%] - 2016/1/12 15:15
- 【jQuery】JavaScript ライブラリ総合質問所 vol.3 (1001) - [75%] - 2014/6/18 20:58 △
- 【jQuery】JavaScript ライブラリ総合質問所 vol.2 (986) - [75%] - 2013/5/20 7:00
- 【jQuery】JavaScript ライブラリ総合質問所 vol.1 (983) - [75%] - 2012/10/8 22:30
- [JavaScript]プログラム作成します (981) - [37%] - 2010/12/8 21:02
トップメニューへ / →のくす牧場書庫について