2016-05-16 9 views
1

警告:私はWordpressのハックであり、フロントエンドの開発者ではありません。ULのすべてのLIにjqueryコードを適用する方法

複製したいコードの作業コピーはhereです。注:オフィス名をクリックすると、オフィスの詳細が表示/非表示になります。

これは自分のjqueryで再作成したい機能です。

Chromeの開発ツールを使用して作業コピーからjqueryをコピーする方法がわかりません。

私はHTML/CSSのjsfiddleを持っています。

私はこのようにjqueryのを使用する必要が

$(document).ready(function() { 
    $('.viewLocationDetail').click(function() { 
    $('.mapLocationDetail').toggle; 
    }); 
} 

が、それは .viewLocationDetailのすべてのインスタンスに適用されるように、クリックだけで同じ LI.mapLocationDetailをトグルするように、私は変更するこのjqueryのを必要とします .viewLocationDetailとします。

LI

<li class="corePrettyStyle prettylink map accredited-training-rto disability-employment-services disability-management-services-dms employment-services employment-support-services-ess job-in-jeopardy training-services wa " data-title="Armadale, WA" data-lat="-32.15511" data-long="116.01419499999997" data-locationindex="0"><a title="View Armadale, WA" href="#" class="viewLocationDetail">Armadale, WA <span class="mapcategories">Categories: <span>Accredited Training – RTO Disability Employment Services Disability Management Services (DMS) Employment Services Employment Support Services (ESS) Job in Jeopardy Training Services WA </span></span></a> 
    <div class="mapLocationDetail"> 
    <div class="mapDescription clearfix"> 
     <ul class="maploc-des"> 
     <li>12/47 William Street</li> 
     <li>Armadale, WA 6112</li> 
     <li><strong>Ph:</strong>&nbsp; (08) 6267 2555</li> 
     <li><strong>Fax:</strong> (08) 6267 2556</li> 
     </ul> 
     For queries not related to Employment Services, please call 1300 677 789.</div> 
    <a href="https://staging.orsgroup.com.au/location/armadale-wa/" class="viewLocationPage btn corePrettyStyle">Location &amp; service details</a> 
    <div class="getDirections">Get directions from 
     <input id="directionsPostcode" type="text" value="" size="10"> 
     <a href="#" class="getdirections btn corePrettyStyle">go</a> 
     <div class="mapLocationDirectionsHolder"></div> 
    </div> 
    </div> 
</li> 

答えて

1

私は、JavaScriptの背景からではありません理解しています。この部分については

$(document).ready(function() { 
    $('.viewLocationDetail').click(function() { 
    // 1. Use $(this). 
    $(this).find('.mapLocationDetail').toggle(); // 2. Missing() 
    }); 
}); // 3. Missing closing); 
+0

:まあ、いくつかのミスは先に行くと、コード内のコメントを読んで、そこにある「クリックだけ.viewLocationDetailと**同じLIに.mapLocationDetailを切り替えます。」 '.mapLcoationDetail'は' ' –

+0

こんにちはPraveen。私は[jsfiddle](https://jsfiddle.net/SRD75/npmjud54/13/)のコードを使用していますが、それは動作していませんか? – Steve

関連する問題