jQuery JavaScript開発のクリックイベントでクリックされたclassNameかid名を取得する方法

前へ 次へ
このQ&Aのポイント
  • jQuery JavaScriptを使用して開発しているシステムで、特定のdiv要素がクリックされた際に、そのクリックされた要素のclassNameかid名を取得する方法について質問です。
  • 現在、phpとjQueryを使用してシステムを開発しています。特定のdiv要素がクリックされたときに、そのクリックされた要素のclassNameかid名を取得したいと考えています。
  • jQuery JavaScriptを使って開発しているシステムで、特定のdiv要素がクリックされたときに、そのクリックされた要素のclassNameかid名を取得する方法を教えてください。
回答を見る
  • ベストアンサー

jQuery JavaScript

初めての質問ですがよろしくお願いします。 とあるシステムをphp+jQueryで開発しています。 <div class="item1" id="item1">アイテム名</div> このdviがクリックされた時に、 $(document).ready(function() { $('div[class^="item"]').mouseover(function(ev) { $(this).css('cursor', 'pointer'); }).click(function(ev) { // **この部分** // }); }); クリックイベント内でクリックされたclassNameかid名を取得する （この場合は item1 を文字列として取得したい） にはどうしたらよいのでしょうか？

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

  • ベストアンサー
  • se-nabe
  • ベストアンサー率34% (31/91)
回答No.1

私も今jqueryを勉強しているのですが、 alert( $('div#item1').attr('id')); こんな感じで表示できませんか？

bluder
質問者

お礼

ありがとうございました。 se-nabeさんの回答で表示されました！ まだまだ勉強不足ですね... やっぱりjQueryのソースからみなきゃだめかな... 今後とも頑張りますのでよろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryで指定された要素のIDに触れた時イベントを起こしたいのです

    jQueryで指定された要素のIDに触れた時イベントを起こしたいのですがうまくいかずに困っています。 jQuery(document).ready(function($) { var msg = ""; $("#Div11").mouseover(function() { msg = "おはよ" alert(msg); }); $("#Div2").mouseover(function() { msg = "こんにちは" alert(msg); }); $("#Div3").mouseover(function() { msg = "うっすー" alert(msg); }); $("#Div4").mouseover(function() { msg = "お疲れ様でした" alert(msg); }); $("#Div5").mouseover(function() { msg = "こんばんは" alert(msg); }); }); このような記述をしているのですがIDに触れた時、値を代入してメッセージを表示させたいのですが出来ません。 どなたかご教示願います！

  • jquery、javascriptについて

    あるdivエリア内をクリックすると、特定のチェックボックスに チェックが入るということをしています。 （チェックボックスにチェックを入れるとdiv内の色が変わります。） つまり、divとチェックを連動させたいのです。 その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、 もっと簡単にまとめる方法はないのでしょうか？ さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名で あわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。 そんなことができるのでしょうか？ 具体的に教えていただけると幸いです。 よろしくお願いいたします。

  • javascriptについて教えてください。

    divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; 　alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>

  • jQueryのアコーディオンがIE6でちゃんと動いてくれない

    jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜MacのSafariなどではちゃんと動いています。 【構造】 （例：HTML） <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー ＜同上のような構造＞ ーーーーー </ul> </div> </div> <!--side end--> （例：jquery（外部js）） $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。

  • jqueryについて質問

    <script> $(function() { $("input").click(function(){ var menu = "#"+this.id; if(menu == "#Attendance") { var className = "AttendanceBody"; $(menu).ready(function() {$.AttendanceBody();}); } }); }); </script> $(menu).ready(function() {$.AttendanceBody();});の『AttendanceBody』を変数名にしたいのですがどのようにしたら動きますでしょうか？

  • jQueryで追加した要素がマウスホバーに反応しない

    jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>

  • jQuery クリックした後の動き

    ボタン(#btn)をクリックすると、#navWarpを右に200px 移動するところまでは出来ましたが、２度目のクリックで元の位置まで 戻すにはどのような方法があるのでしょうか。 宜しくお願いします。 ■jquery $(function(){ $("#btn").click(function(){ $("#navWarp").stop().animate({"left":"200px"},500); }); }); ■css #navWarp{ position:relative; margin:0 0 0 -200px; } #btn{ position:absolute; top:0; left:200px; cursor: pointer; } ■html <div id="navWarp"> <div id="btn"></div> </div>

  • JQueryのセレクタ

    jqueryでセレクタの取得をしたいのですがうまくいきません div要素の中のspan要素を取得したいのですがclassで取得すると重いのでid属性で場所を限定してからclass属性で絞り込みたいです こんな感じにしたらだめでした $("#hoge.foo").html('ほげ'); html <div id=hoge> <span class=foo></span> </div>

  • 【jQuery】jQuery Masonry

    この度jQueryで壁にぶつかり、質問させて頂きます。 現在開発中のWEBサービスにて、jQuery Masonryとアコーディオン機能を組み合わせたページを構築する流れとなっております。 画面イメージとしては・・ Pinterestにアコーディオン機能が付いており、各帯をクリックする毎に内容が表示される機能です。 【Point】横幅は制限がありますが、縦幅には制限が無く、アコーディオンが開閉する毎にグリッド部分の再構築（ムーブアクション）を行いたいのですが、それが上手くいきません。 参考サイト：http://goo.gl/QLQI7 実際のソース（抜粋）： <script> jQuery(function(){ var $container = $('#container'); $container.imagesLoaded( function(){ jQuery('#container').masonry({ itemSelector: '.item', isAnimated:true }); }); }); </script> <script> jQuery(function () { jQuery("dd").css("display","none"); jQuery("dl dt").click(function(){ var cont = jQuery(this).next(); if(jQuery(cont).css("display")=="none"){ jQuery("dd").slideUp("slow"); jQuery(cont).slideDown("fast"); jQuery("dt").removeClass("select"); jQuery(this).addClass("select"); } }).hover( function(){jQuery(this).addClass("over");} ),( function(){jQuery(this).removeClass("over");} ); }); </script> <div id="container"> ～ここから～ <div class="item"> <dl> <dt>タイトル1</dt> <dd>本文1</dd> <dt>タイトル2</dt> <dd>本文2</dd> <dt>タイトル3</dt> <dd>本文3</dd> </dl> </div> </div> ～ここまでがLoopで複数のデータが表示される～ なお、jQuery初心者でして具体的な構文までをサポート頂けますと幸いです。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • jquery教えて下さい。

    現在、 <script type="text/javascript"> $(function(){ $("#btn1","#test2").click(function () { $("div","#test2").slideDown(3000); }); }); </script> のコードで btn1のidボタン▼をクリックすると test2がslidedownするコードを造っているのですが これをボタンを押さずに ページがひらいたと同時にスライドするにはどのように すればよろしいでしょうか？ 宜しくお願いします。 <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> <div id="btn1">▼</div> </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する