javascript - Jqueryでクラス名を取得

Question

わかりましたので、私の問題です。メニューとすべてのコンテンツを個別に取り込むphpファイルを実行しています。たとえば、Index.php をロードすると、index.php menu.php と dropdown.js ファイルがロードされます。メニューは機能しており、ドロップダウンを行います。私の問題は、ナビゲーションのクラスを呼び出して、「li > a > id」の名前をリストしたいことです。これは、ホーム、私たちについてなどです....私はさまざまな方法をたくさん試しましたが、理解できないようですjqueryでこれを行うための簡単なスクリプトを理解できないのはなぜですか。誰にも提案はありますか？以下は、メニューページの私のコードです。

<div id="nav" class="nav">
  <ul id="sddm">
  <li><a class="navigation" id="Home" href="index.php" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Home</a>
  <div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li><a class="navigation" href="station_history.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Station History</a>
  <div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="Apparatus.php" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Apparatus</a>
  <div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" href="truck_history.php">Truck History</a> 
  </div>
  </li>
  <li>
  <a class="navigation" href="photos.php" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">Photos</a>
  <div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="news_events.php" onMouseOver="mopen('m5')" onMouseOut="mclosetime()">News & Events</a>
  <div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="Station_members.php" onMouseOver="mopen('m6')" onMouseOut="mclosetime()">Station Members</a>
  <div id="m6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="education.php" onMouseOver="mopen('m7')" onMouseOut="mclosetime()">Education</a>
  <div id="m7" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" href="SiteID">Station Tours</a>
  <a class="navigation" href="SiteID">Fire Extinguisher</a>
  <a class="navigation" href="SiteID">First Aid & CPR</a>
  <a class="navigation" href="SiteID">Smoke Alarms</a> 
  </div>
  </li>
  <li>
  <a class="navigation" href="SiteID" onMouseOver="mopen('m8')" onMouseOut="mclosetime()">Contact Us</a>
  <div id="m8" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> </div>
  </li>
  </ul>
  </div>
  </div>

これは、機能しないアラートのためだけに実行しようとしていた私のコードです。

//ナビゲーション

$("a.navigation").click(function () {
    alert("hello"); 
});

最後に、どのコードが機能するかを突き止めました。これは、他の誰かがこの問題を抱えている場合に私が使用したものです。助けてくれたみんなに感謝します!!!

//navigation 
$(document).ready(function() {
    $("a.navigation").click(function () {
        alert("hello"); 
    })

});

score 0 · Accepted Answer

最初にデフォルトのアクションを防止する必要があります。これを試して：

$("a.navigation").click(function (event) {
    event.preventDefault();
    alert("hello"); 
});

score 0 · Accepted Answer

このコードを参照してください。動作します:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="nav" class="nav">
  <ul id="sddm">
  <li><a class="navigation" id="Home" href="index.php" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Home</a>
  <div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li><a class="navigation" href="station_history.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Station History</a>
  <div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="Apparatus.php" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Apparatus</a>
  <div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" href="truck_history.php">Truck History</a> 
  </div>
  </li>
  <li>
  <a class="navigation" href="photos.php" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">Photos</a>
  <div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="news_events.php" onMouseOver="mopen('m5')" onMouseOut="mclosetime()">News & Events</a>
  <div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="Station_members.php" onMouseOver="mopen('m6')" onMouseOut="mclosetime()">Station Members</a>
  <div id="m6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" href="education.php" onMouseOver="mopen('m7')" onMouseOut="mclosetime()">Education</a>
  <div id="m7" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" href="SiteID">Station Tours</a>
  <a class="navigation" href="SiteID">Fire Extinguisher</a>
  <a class="navigation" href="SiteID">First Aid & CPR</a>
  <a class="navigation" href="SiteID">Smoke Alarms</a> 
  </div>
  </li>
  <li>
  <a class="navigation" href="SiteID" onMouseOver="mopen('m8')" onMouseOut="mclosetime()">Contact Us</a>
  <div id="m8" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> </div>
  </li>
  </ul>
  </div>
  </div>


  <script type="text/javascript">

    $(function(){
        $("a.navigation").click(function () {
                    event.preventDefault();
            alert("hello"); 
        }); 
    });

  </script>

score 0 · Accepted Answer

jQueryを使用すると、の小道具IDを呼び出すことができます

$("a.navigation").click(function (e) {

    alert($(this).prop("id"));

})

フィドルはエラーになりますが、「ホーム」をクリックするとアラートが表示されます。それがあなたが望んでいることだと思います。 http://jsfiddle.net/djwave28/M3vdf/1/

2番目のインスタンスでは、次のことができます

var lid = Array();

 $("a.navigation").each(function (e) {

        lid.push($(this).prop("id"));

    })
console.log(lid);

これにより、ナビゲーションクラス要素のすべての ID が蓋配列に配置されます。

javascript - Jqueryでクラス名を取得

3 に答える 3

Related

Reference