jQueryでの表示

Question

クリック可能なマップから入力を受け取り、そのデータを使用してラッパーdivに隠されたデータコレクションを表示または非表示にするスクリプトを作成しました。スクリプトは実際には機能しませんし、私が間違って何をしているのか分かりません。スクリプトは、参考のために以下の通りです：

function createCallback(i){ 
    return function(){ 
    jQuery(".stateText").addClass("hidden"); 
    jQuery("#st_" + i + "-1").toggleClass("hidden"); 
    }; 
}; 

jQuery(document).ready(function ($) { 
    for (let i = 1; i < 50; i++) { 
     $("#st_" + i).click(createCallback(i)); 

        }; 
        }); 

私の推論の背後にある考え方は、彼らのアルファベット順（例えばアラバマ州= ST_1、など）に対応するIDを割り当てられている50州以上のスクリプト反復していることです。

各状態の各データは、（st_i-1の形式の）一意のIDを持つ隠し要素として開始されます。イベントが発生すると、クラス 'statetext'を持つ他のすべての要素を非表示にし、選択した要素のクラスを切り替える必要があります。ここで

は、表示/非表示のdivのためのコードのサンプルです：

<div id="data-area"> 
      <div id="st_1-1" class="statetext hidden"> 
       <h4>Alabama</h4> 
       <ul class="experience-list"> 
       <li>Right of Way Land Services (Pipeline, Transmission, Telecommunications)</li> 
       <li>Mineral Property Management</li> 
       </ul> 
       <h4>Recent Projects</h4> 
       <ul class="experience-list"> 
       <li>500+ mile multistate FERC pipeline</li> 
       <li>700+ mile multistate FERC pipeline</li> 
       <li>270+ mile multistate FERC pipeline</li> 
       </ul> 
      </div> 

実際のアプリケーションが正しく機能しません。クリックイベントは頻繁に発生せず、他のディビジョンは「隠れた」クラスが追加されていません。

私はここで間違っていますか？

Answer 1

私はあなたの質問を理解しているかどうかはわかりませんが、この部分は私には見えません。

<div id="st_1-1" class="statetext hidden"> 

これはST_1

st_1-1と評価されますID st_1-1（IDにアンダースコア以外の特殊文字を使用しないでください）

$("#st_" + i).click(createCallback(i)); 

がある持っています同一ではないst_1

私はこれがあなたのソリューション:)

Answer 2

編集を絞り込むことを願っています：あなたはst_1にイベントを追加したいならば、上記のHTMLコードが不完全であるjQuery(".stateText")とclass="statetext hidden">

の間にタイプミスがありますが、多分ここに何あなたが生命維持にあなた返される関数を作ってみることができます

function createCallback(i) { 
 
    return function() { 
 
    jQuery(".statetext").addClass("hidden"); 
 
    //console.log(i); 
 
    jQuery("#st_" + i + "-1").toggleClass("hidden"); 
 
    }; 
 
}; 
 

 
jQuery(document).ready(function() { 
 
    for (let i = 1; i < 50; i++) { 
 
    $("#st_" + i).click(createCallback(i)); 
 

 
    }; 
 
});

.hidden{display:none} 
 
.toggle{font-weight:bold;cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="st_1" class="toggle">+ toggle this state</div> 
 
<div id="data-area"> 
 
    <div id="st_1-1" class="statetext hidden"> 
 
    <h4>Alabama</h4> 
 
    <ul class="experience-list"> 
 
     <li>Right of Way Land Services (Pipeline, Transmission, Telecommunications)</li> 
 
     <li>Mineral Property Management</li> 
 
    </ul> 
 
    <h4>Recent Projects</h4> 
 
    <ul class="experience-list"> 
 
     <li>500+ mile multistate FERC pipeline</li> 
 
     <li>700+ mile multistate FERC pipeline</li> 
 
     <li>270+ mile multistate FERC pipeline</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div id="st_2" class="toggle">+ toggle this state</div> 
 
<div id="data-area"> 
 
    <div id="st_2-1" class="statetext hidden"> 
 
    <h4>Alaska</h4> 
 
    <ul class="experience-list"> 
 
     <li>Right of Way Land Services (Pipeline, Transmission, Telecommunications)</li> 
 
     <li>Mineral Property Management</li> 
 
    </ul> 
 
    <h4>Recent Projects</h4> 
 
    <ul class="experience-list"> 
 
     <li>500+ mile multistate FERC pipeline</li> 
 
     <li>700+ mile multistate FERC pipeline</li> 
 
     <li>270+ mile multistate FERC pipeline</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 3

たい：

ので、代わりに：

function(){ 
    jQuery(".stateText").addClass("hidden"); 
    jQuery("#st_" + i + "-1").toggleClass("hidden"); 
    }; 

あなたが行うことができます：あなたはあなたの関数に関係なく呼び出されることが確実である

(function(){ 
    jQuery(".stateText").addClass("hidden"); 
    jQuery("#st_" + i + "-1").toggleClass("hidden"); 
    }()); 

少なくともそのように。