jQueryによるカウントアップ

このQ&Aのポイント
  • jQueryを使用して、ページ遷移を行わずに数字をカウントアップする方法について質問させてください。
  • リンクをクリックした時に、数字を+1する処理を単純に行いたいのですが、複雑な処理が多く、より簡単な方法があるか教えてください。
  • 検索してみましたが、カウントアップを実現するための情報が見つからず、知識が足りないので助けていただけると嬉しいです。
回答を見る
  • ベストアンサー

jQueryによるカウントアップ

質問をさせてください。 <span class="1000"> <a class="2000" title="このコメントを承認しない" href="comment.php?c=327&action=unapprovecomment">承認しない</a> </span> こちらのリンクを押した時に <span class="count"> ( <span class="Approved-count">100</span> ) </span> <span class="Approved-count">100</span> こちらの数字100にページ遷移を行わずに+1を行いたいのですが それは可能でしょうか? 検索をしてみたのですが、なにやら複雑な処理が多く 単純にカウントアップを行うだけならもっと簡単にできるのではと 質問をさせて頂きました。 どなたかご教示いただけましたら幸いでございます。

質問者が選んだベストアンサー

  • ベストアンサー
  • shiren2
  • ベストアンサー率47% (139/295)
回答No.1

こういうことでしょうか? $(function(){ $("a.2000").click(function(){ $(".Approved-count").text(parseInt($(".Approved-count").text())+1); return false; }); });

dezadezadeza
質問者

お礼

まさにこのとおりです。 お礼が遅くなり失礼しました。

関連するQ&A

  • phpコードを解説して欲しいです。$str 多く困

    $str = '<h3 id="trackbacks">Trackback</h3>'; $str .= '<ol class="trackback-list" id="custom-trackback">'; $i = 0; foreach ( $comments as $comment ) { if ( get_comment_type() != 'comment' ) { $str .= '<li class="clearfix" id="comment-' . get_comment_ID() . '">'; $str .= '<div class="trackback-author">'; $str .= '<p class="comment-author-name">'; $comment_author_url = $comment->comment_author_url; $comment_author = $comment->comment_author; if ( $comment_author_url ) { $str .= '<a href="' . esc_url( $comment_author_url ) . '" target="_blank" title="' . esc_attr( $comment_author ) . '">'; $str .= esc_html( $comment_author ); $str .= '</a>'; } else { $str .= esc_html( $comment_author ); } $str .= '</p>'; $str .= '<p class="comment-meta">' . '<a href="' . esc_url( get_comment_link( $comment->comment_ID ) ) . '">' . get_comment_date() .'<span>'. get_comment_time() . '</span><a class="edit" href="' . get_edit_comment_link() . '">(編集)</a></span></p>'; $str .='</div>'; $str .= '<div class="trackback-body">'; if ( $comment->comment_approved == '0' ) { $str .= '<p class="attention"><em>あなたのトラックバックは承認待ちです。</em></p>'; } $str .= '<p>' . esc_html( get_comment_text() ) . '</p>'; $str .= '</div>'; $str .= '</li>'; $i++; } } $str .= '</ol>'; if ( $i > 0 ) { echo $str;

    • 締切済み
    • PHP
  • アフィリエイトのようなカウントシステム

    アフィリエイトのように自分で配布したURLごとにカウントするというものを作りたいと思っています。 リンクを <a href="jump.php?no=1">マイHP</a> <a href="jump.php?no=2">マイHP</a> <a href="jump.php?no=3">マイHP</a> として、$_GET['no'] の値を見てカウント集計するという感じで考えてはいるのですが、どうすれば「no」ごとにカウントを取れるのかがわかりません。 単にカウントを取るプログラムは組めるんですが・・・ --------------------------------------------- <? header("Location: http://www.○○○.php"); ?> <?php $filename = "count.dat"; $file = fopen($filename, "r"); $count = fread($file, filesize($filename)); fclose($file); $count = $count + 1; print "$count"; $file = fopen($filename, "w"); fwrite($file, $count); fclose($file); ?> --------------------------------------------- このプログラムを応用して「no」ごとのカウントは出来るでしょうか?それとも、他のやり方の方がいいのでしょうか? どうかお教え願います。

    • 締切済み
    • PHP
  • 記事タイトルの横にコメント数を表示する方法

    現在、ライブドアブログでブログを制作中です。 ↓をトップページなど各ページに挿入したいのですが、 <div class="article-title-outer"> <h2 class="article-title entry-title"><a href="<$ArticlePermalink$>" title="個別記事ページへ" rel="bookmark"><$ArticleTitle ESCAPE$></a><IfArticleRating><span class="rating"><$ArticleRatingIcon$></span></IfArticleRating></h2> <IfArticleAllowComment><span class="article-comment-count"><a href="<$ArticlePermalink$>#comments" title="コメント一覧へ">Comment(<$ArticleCommentCount$>)</a></span> </div> どこに挿入したら良いか分かりませんでした。 記事タイトルのところに挿入して、保存しようとしたら文法上の誤りがありますと出ました。 テンプレートは現在↓を使っています。 http://blog.livedoor.jp/staff/archives/51796778.html ↓は自分のブログのCSSです。 http://www.dotup.org/uploda/www.dotup.org3942917.txt ↓はブログのトップページです。 http://www.dotup.org/uploda/www.dotup.org3942922.txt 解決策が分かる方いましたら、力を貸してください。 よろしくお願いします。

    • 締切済み
    • CSS
  • JQueryを使ってcssを書き換え

    何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });

  • jQueryスライドメニューの初歩的な質問です

    以下のスライドメニューは、それぞれブロック要素で構成されていて、リンク文字や余白をクリックするとスライドトグルで開閉が行われます(htmlファイルにコピーすれば動作すると思います)。 ひとまずイメージ通りに完成したのですが、1つ困ったことがあります。それはリンク文字をクリックしたときにトグルが実行されてしまうことです。ページ遷移する間にメニューが一度開閉してしまうので見た目にあまりスマートではありません。 それを修正するためいろいろ試行錯誤したのですが、どうやってもわからなかったので質問いたしました。リンク文字をクリックしたときは、ページ遷移のみでトグルを実行しないようにするにはどのように書けばよいのでしょうか? また、このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます。この原因が分かる方がいらしたらぜひお教えください。 どうぞよろしくお願いいたします。 <!----------------------------------> <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type='text/javascript'>google.load('jquery', '1.7.1')</script> <script type='text/javascript'> <!-- $(function(){ $('span.tree_a').click(function() { $(this).next().slideToggle(); }).next().hide(); }); //--> </script> <!----------------------------------> <style type="text/css"> span.tree_a{ width: 100%; display: block; } </style> <!----------------------------------> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー1</a></li> </ul> </li> </ul> </li> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー2</a></li> </ul> </li> </ul> </li> </ul> <!---------------------------------->

  • preg_replaceでタグだけ置換

    HTMLのタグを別のタグに置換しようとしています。 HTML中に複数ある<a></a>タグ <a href="/w/index.php?title=%E3%83%95%E3%82%B0%E3%83%AA%E3%83%BC%E5%B7%9D&amp;action=edit" class="new" title="フグリー川">フグリー川</a>など という文字列の<a></a>タグを<span style="color:#ff0000;"></span>に置換したいのです。 $pattern = '|<a href="/w/index\.php\?title=.*?">(.*)</a>|'; $replace = '<span style="color:#ff0000 ;">\\1</span>'; preg_replace( $pattern, $replace, $html, -1, $count); print $count; $countの表示は 1 でした。上記のような<a>タグは複数あるのに。 上記のような<a>タグをマッチさせるにはどうパターン表記したらいいでしょうか? PHP5.2.4です。 ご教授お願いします。

    • ベストアンサー
    • PHP
  • カウントアップ

    以前質問させて頂いた続きなのですがまた詰まってしまったので 知恵をお借りしたいと思います。 File Count.java public class Count { public int read(){ return 1; } public void write(int count){ (1) } } File Test.java //カウント処理 Count count = new Count(); int scount = count.read(); contribute.setAttribute("no", ""+scount); scount = scount+1; count.write(scount); Test.javaファイルにおいて変数scountを使用する際に 1~10と読み込むたびに数字を一つづつ足していくという処理を行いたいのです。 (1)の部分にソースを書くことまでは指定されており、ここまでは間違えていないと言われているのですが(1)の部分をどんな風に作成すれば良いかがわかりません。 どのように書けば良いのでしょうか?? よろしくお願いします。

  • CSSを動的出力部分で対応させたい

    以下のようなソースで、動的に出力されるコンテンツのレイアウトに対応したいと思っています。 "Cat_StyleP_img_1"、"name_"、"comment_"のクラス指定したDIVエリアは動的に出力される部分です。 --CSS-- div.mainframe_ { float: right; display: inline; overflow: hidden; } div.container_ div.contents_, div.container_ div.mainframe_ { width: 700px; } div.CategoryStyleP_ { width:100%; overflow: hidden; padding-bottom: 20px; } div.CategoryStyleP_Line_ { width: 102%; overflow: hidden; padding: 10px 0 10px 10px; margin-bottom: 10px; } div.CategoryStyleP_Item_ { float: left; display: inline; width: 340px; margin-right: 10px; padding: 10px 0; overflow: hidden; background: #fff; } div.CategoryStyleP_Item_ .Cat_StyleP_img_ { float: left; display: inline; width: 140px; } div.CategoryStyleP_Item_ .Cat_StyleP_main_ { float: left; display: inline; width: 180px; padding-right: 10px; } div.CategoryStyleP_Item_ h3.name_ { padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #cfcfcf; font-size: 14px; font-weight: bold; } div.CategoryStyleP_Item_ div.comment_ img { margin: 0 0 10px 0; } --html-- <body > <div class="container_"> <div class="contents_"> <div class="mainframe_"> <div class="CategoryStyleP_"> <div class="CategoryStyleP_Line_ heightLineParent"> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像1"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルA</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 </div> </div> </div> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像2"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルB</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 コメント、コメント。</div> <span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span></div> </div> </div> </div> </div> </div> </div> </body> このレイアウトで出力する画像が無かった場合、"Cat_StyleP_img_1"のDIV自体が出力されない 仕様なのですが、画像の出力がない場合に、その他2つ("name_"、"comment_")の要素を横に広げて、 画像の出力が無かった場合の空きスペースが埋まるようにしたいのですが、何か良い方法はありませんでしょうか? JavaScriptではなくCSSで何とか対応したいと考えています。 お助け下さい、何卒宜しくお願いします。

    • 締切済み
    • CSS
  • カテゴリーに登録数を表示させる

    mysql + php の掲示板に関する質問です。 カテゴリーの一覧表示でタイトルの横に登録数を表示させたいのですがどのようにすれば 良いのか困っています。 <ul class="group"> <?php foreach($categories as $category): ?> <li class="list-group"> <a href=""><?php _e($category->name); ?></a> <?php endforeach; ?> 上記でカテゴリー名とurlを表示しているのですが、少し変更してカテゴリーに投稿されている数を表示したいと思っています。 SELECT category, count(*) FROM jobs GROUP BY category 上記でカテゴリーに登録されている数は取得(sql)できるのですが、これをどうphpにすれ ば良いのか理解できません。 理想は下記になることです。 <li class="list-group-item"> <a href="">カテゴリー</a> <span class="badge">10</span> </li> よろしくお願いします。

    • 締切済み
    • PHP
  • 次のhtmlはどのような内容なのでしょうか?

    あるサイトのソースなのですが、普通リンクを貼るときには、<a href="***.html"></a>という風にしますよね?でも下記のソースはそのようになっていません。下記のリンクの貼り方は、どのような仕組みなのでしょうか <li class="top"><span><a href="../" class="visible"></a><a href="../" class="hidden">TOP</a></span></li> <li class="news"><span><a href="../news/" class="visible"></a><a href="../news/" class="hidden">NEWS&amp;INFORMATION</a></span></li> <li class="schedule"><span><a href="../schedule/" class="visible"></a><a href="../schedule/" class="hidden">SCHEDULE</a></span></li> <li class="discography"><span><a href="../discography/" class="visible"></a><a href="../discography/" class="hidden">DISCOGRAPHY</a></span></li> <li class="special"><span><a href="../special/" class="visible"></a><a href="../special/" class="hidden">SPECIAL</a></span></li> <li class="teamayu"><span><a href="../teamayu/" class="visible"></a><a href="../teamayu/" class="hidden">TeamAyu OFFICIAL FANCLUB</a></span></li> <li class="link"><span><a href="../link/" class="visible"></a><a href="../link/" class="hidden">LINK</a></span></li>

    • ベストアンサー
    • HTML

専門家に質問してみよう