問題與jQuery顯示/隱藏

我寫了一個腳本，以便從地圖點擊接受輸入，並使用這些數據來顯示或隱藏隱藏在一個包裝DIV的數據集合。該腳本並沒有真正的工作，我不知道我做錯了什麼。腳本如下供參考：問題與jQuery顯示/隱藏

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五十個州。

每個每個狀態的數據的開始了與唯一的ID（形式st_i-1）的隱藏元件。事件觸發時，它應該隱藏所有其他具有類'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>

實際應用無法正常運行。點擊事件通常不會觸發，其他div沒有獲得添加的「隱藏」類。

我在這裏做錯了什麼？

來源

2017-06-21 Ian

我不知道，我明白你的問題，但是這部分不看我的權利。

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

具有ID st_1-1（避免使用特殊字符以外在ID下劃線）

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

這將計算爲st_1

st_1-1是不一樣st_1

我希望這將縮小您的解決方案:)

來源

2017-06-21 17:15:28

哦，我很抱歉，不清楚。點擊地圖時觸發的ID和關聯文本的ID是不同的（因爲它們必須是）。地圖點擊具有id st_1，關聯數據具有id st_1-1。 – Ian

[ID中的連字符在HTML5中完全合法]（https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html）。其實。他們在HTML4中也是合法的;它是HTML4中無效的其他特殊字符。 – cjl750

編輯：你有錯字和class="statetext hidden">

之間jQuery(".stateText")，如果你想事件添加到st_1然後上面的HTML代碼是不完整的，但也許在這裏你要

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>

來源

2017-06-21 17:46:02 uingtea

這不起作用。代碼應該將隱藏類應用於不是目標div的所有div。例如，如果有人展示了阿拉巴馬，然後他們點擊加利福尼亞州，阿拉巴馬州將隱藏起來，只有加利福尼亞州纔會顯示。謝謝你的回答。 – Ian

發現問題，它的錯字。 – uingtea

你可以嘗試讓你的返回功能於iife：

所以不是：

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

你可以這樣做：

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

至少這樣你確信你的函數被稱爲無關。

來源

2017-06-21 18:16:35

這會引發錯誤。我非常確定，}（））;需要是 }）（）; 無論如何，它仍然無法正常工作，因爲這隻會強制顯示所有項目。最大的問題是，隱藏所有其他元素並不起作用，我不能在我的生活中找出原因。 – Ian

問題與jQuery顯示/隱藏

回答

相關問題