jquery - click() リスト項目で、同じ ID の div を表示

Question

ID が div に関連付けられているリスト項目のメニューがあり、それぞれにリスト項目に関連するコンテンツが含まれています。特定のリスト項目がクリックされたときにコンテンツを表示しようとしています。thisがを参照していることはわかっ#agency ul liていますが、コンテンツ div を参照する方法がわかりません。

HTML

<ul id="agency">
            <li>Select an Agency</li>
            <ul>
                <li id="agriculture">Department of Agriculture</li>
                <li id="commerce">Department of Commerce</li>
                <li id="defense">Department of Defense</li>
                <li id="energy">Department of Energy</li>
                <li id="health">Department of Health and Human Services</li>
                <li id="homeland">Department of Homeland Security</li>
                <li id="interior">Department of the Interior</li>
                <li id="transportation">Department of Transportation</li>
                <li id="veterans">Department of Veteran Affairs</li>
                <li id="epa">Environmental Protection Agency</li>
                <li id="aeronautics">Nat'l Aeronautics and Space Admin</li>
            </ul>
        </ul>

    <div id="agency-wrap">
        <div id="agriculture">
            <ul>
                <li><a href="http://www.ars.usda.gov/partnering">USDA Agricultural Research Service</a></li>
                <li><a href="http://www.ars.usda.gov/business/docs.htm?docid=763&page=3">USDA ARS Tech Transfer Coordinators</a></li>
                <li><a href="http://www.fs.fed.us">USDA Forest Service</a></li>
            </ul>
        </div>
        <div id="commerce">
            <ul>
                <li><a href="http://www.nist.gov/tpo/">DOC Nat'l Institue of Standards and Tech</a></li>
                <li><a href="http://www.noaa.gov">DOC Nat'l Ocean and Atmosph Admin</a></li>
                <li><a href="http://www.its.bldrdoc.gov/">DOC Institue for Telecom Sciences</a></li>
                <li><a href="http://www.nist.gov/mep/">DOC Manufacturing Extension Program</a></li>
            </ul>
        </div>
        <div id="defense">
            <ul>
                <li><a href="http://www.acq.osd.mil/ott/techtransit">DOD Secretary of Defense</a></li>
                <li><a href="http://www.arl.army.mil/main/Main/default.cfm?Action=6">DOD Army Research Lab</a></li>
                <li><a href="http://www.onr.navy.mil/en/Sciecne-Technology/Directtorates/Transition/Technology-Transfer-T2aspx">DOD Office Naval Research</a></li>
                <li><a href="http://www.wpafb.af.mil/library/factsheets/factsheet.asp?id=6026">DOD Air Force Research Lab</a></li>
                <li><a href="http://www.mda.mil/business/tech_apps.html">DOD Missle Defense Agency</a></li>
                <li><a href="http://www.jfcom.mil/about/industry.htm">DOD Joint Forces</a></li>
                <li><a href="http://www.defenseinnovationmarketplace.mil/index.html">DOD Defense Innovation Marketplace</a></li>
            </ul>
        </div>
        <div id="energy">
            <ul>
                <li><a href="http://technologytransfer.energy.gov">DOE Tech Transfer Office</a></li>
            </ul>
        </div>
        <div id="health">
            <ul>
                <li><a href="http://www.ott.nih.gov/">DHHS National Institutes of HealthNIH </a></li>
                <li><a href="http://www.cdc.gov/od/ads/techtran/tech.htm">DHHS Centers for Disease Control</a></li>
                <li><a href="http://www.fda.gov/ScienceResearch/CollaborativeOpportunities/default.htm">DHHS Food and Drug Administration</a></li>
            </ul>
        </div>

JS

$(function() {
    $('#agency-wrap > div').addClass('agency-hide');

    $('#agency ul li').click(function() {
        $("#" + $(this).attr('id')).fadeIn('slow').siblings().hide();
    });
});

CSS

.agency-hide {
    display: none;
}        
#agency {
    width: 300px;
}

私はまだ CSS のスタイルを設定していません。機能が完成した後で対応します。

http://jsfiddle.net/yD4D5/

score 4 · Accepted Answer

同じドキュメント内の 2 つの要素に同じ ID を使用しないでください。

それぞれの対応divするID を保存datali

<li data-id="agriculture">Department of Agriculture</li>

jsで

 $('#agency ul li').click(function() {
        $("#" + $(this).data("id")).fadeIn('slow').siblings().hide();
    });

score 1 · Accepted Answer

id を使用して要素にアクセスすると、セレクターエンジンは、一意であると想定される ID が 1 つだけであると想定します。これが、この動作が見られる理由です。

IDをクラスに置き換えて、セレクターをこれに変更してみてください

$("." + $(this).data("id")).fadeIn('slow').siblings().hide();

それはうまくいくはずです..

フィドルをチェック

JS

$(function() {
    $('#agency-wrap > div').addClass('agency-hide');

    $('#agency ul li').click(function() {
        $("." + $(this).attr('id')).fadeIn('slow').siblings().hide();
    });
});

HTML

<ul id="agency">
            <li>Select an Agency</li>
            <ul>
                <li id="agriculture">Department of Agriculture</li>
                <li id="commerce">Department of Commerce</li>
                <li id="defense">Department of Defense</li>
                <li id="energy">Department of Energy</li>
                <li id="health">Department of Health and Human Services</li>
                <li id="homeland">Department of Homeland Security</li>
                <li id="interior">Department of the Interior</li>
                <li id="transportation">Department of Transportation</li>
                <li id="veterans">Department of Veteran Affairs</li>
                <li id="epa">Environmental Protection Agency</li>
                <li id="aeronautics">Nat'l Aeronautics and Space Admin</li>
            </ul>
        </ul>

    <div id="agency-wrap">
        <div class="agriculture">
            <ul>
                <li><a href="http://www.ars.usda.gov/partnering">USDA Agricultural Research Service</a></li>
                <li><a href="http://www.ars.usda.gov/business/docs.htm?docid=763&page=3">USDA ARS Tech Transfer Coordinators</a></li>
                <li><a href="http://www.fs.fed.us">USDA Forest Service</a></li>
            </ul>
        </div>
        <div class="commerce">
            <ul>
                <li><a href="http://www.nist.gov/tpo/">DOC Nat'l Institue of Standards and Tech</a></li>
                <li><a href="http://www.noaa.gov">DOC Nat'l Ocean and Atmosph Admin</a></li>
                <li><a href="http://www.its.bldrdoc.gov/">DOC Institue for Telecom Sciences</a></li>
                <li><a href="http://www.nist.gov/mep/">DOC Manufacturing Extension Program</a></li>
            </ul>
        </div>
        <div class="defense">
            <ul>
                <li><a href="http://www.acq.osd.mil/ott/techtransit">DOD Secretary of Defense</a></li>
                <li><a href="http://www.arl.army.mil/main/Main/default.cfm?Action=6">DOD Army Research Lab</a></li>
                <li><a href="http://www.onr.navy.mil/en/Sciecne-Technology/Directtorates/Transition/Technology-Transfer-T2aspx">DOD Office Naval Research</a></li>
                <li><a href="http://www.wpafb.af.mil/library/factsheets/factsheet.asp?id=6026">DOD Air Force Research Lab</a></li>
                <li><a href="http://www.mda.mil/business/tech_apps.html">DOD Missle Defense Agency</a></li>
                <li><a href="http://www.jfcom.mil/about/industry.htm">DOD Joint Forces</a></li>
                <li><a href="http://www.defenseinnovationmarketplace.mil/index.html">DOD Defense Innovation Marketplace</a></li>
            </ul>
        </div>
        <div class="energy">
            <ul>
                <li><a href="http://technologytransfer.energy.gov">DOE Tech Transfer Office</a></li>
            </ul>
        </div>
        <div class="health">
            <ul>
                <li><a href="http://www.ott.nih.gov/">DHHS National Institutes of HealthNIH </a></li>
                <li><a href="http://www.cdc.gov/od/ads/techtran/tech.htm">DHHS Centers for Disease Control</a></li>
                <li><a href="http://www.fda.gov/ScienceResearch/CollaborativeOpportunities/default.htm">DHHS Food and Drug Administration</a></li>
            </ul>
        </div>

score 0 · Accepted Answer

div には別の ID を指定する必要があります。ID は、その名前が示すように一意である必要があります。これが、ID が一意ではないため、div にアクセスできない理由です。

jquery - click() リスト項目で、同じ ID の div を表示

3 に答える 3

Related

Reference