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'隐藏所有其他元素，然后切换所选元素的类。

以下是show / hide 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

编辑：您在jQuery(".stateText")和class="statetext hidden">

之间输错了

如果你想将事件添加到st_1，那么你上面的html代码是不完整的，但也许你想要的是

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以尝试将你的退回功能变成一个生命的人：

所以代替：

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

你可以这样做：

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

至少就是这样，你确定你的函数会被调用。

jQuery显示/隐藏

3 个答案: