问题与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显示/隐藏

回答

相关问题