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) );

                    };
                    });

我的推理背后的想法是，该脚本迭代了 50 个州，这些州分配了与其字母顺序相对应的 ID（例如 Alabama = st_1 等）。

每个状态的每个数据都以具有唯一 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 没有添加“隐藏”类。

我在这里做错了什么？

Answer 1

我不确定我是否理解你的问题，但这部分对我来说并不正确。

<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

不同

我希望这会缩小您的解决方案 :)

Answer 2

您可以尝试将返回的函数变成 iife：

所以而不是：

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

你可以这样做：

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

至少这样你就可以确定你的函数无论如何都会被调用。

Answer 3

编辑：jQuery(".stateText") 和 class="statetext hidden"> 之间有错字

如果您想将事件添加到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>