JQuery使用'在页面加载时隐藏；以'；开头；，can'；不要稍后打开隐藏

我想在加载页面时隐藏一个div。它是一个动态div，被分配一个类名，然后根据其他条件添加一个数字

所以我有这个

$(function() {
  $("[class^='myClass']").hide();
});

问题是，稍后，当我试图显示div时，我只想显示其中一个。所以我试试这个

$(document).ready(function() {
  $("[class^='showDiv']").click(function() {
    // I use the showDiv value (array index) to get the specific
    //  class I need to now show

    $(".myClass2").show();

  });
});

问题是，它没有显示我的班级。我认为这是因为“hide”函数隐藏了从“myClass”开始的所有内容。当我试图显示特定的“.myClass2”时，它会覆盖它，因为它被前面的hide隐藏

但我无法解开这张皮。否则所有元素都会显示

我不知道在这里该怎么办

谢谢

编辑

我试过这个，效果很好

我不是一开始就躲起来，而是这样做

$(function() {
      $("[class^='myClass']").each(function( index ) {
          $(".myClass" + index).hide();
      });

    });

这很好。所以我很确定我的问题是从一开始就用“通配符”隐藏一个类

有比这个更好的解决方案吗？

这个怎么样？ 一对一关系样本

JavaScript:

$(function() {
    $('.myClass').hide();

    $('.showDiv').click(function() {
        var index = $('.showDiv').index(this);

        $('.myClass:eq(' + index + ')').toggle();
    });
});

HTML:

showDiv
showDiv
showDiv
myClass 1
myClass 2
myClass 3

我认为会更好。我们需要查看相关的html。如果嵌套了这些类中的任何一个，这将是一个问题，因为您无法显示隐藏元素的后代。请使用浏览器调试器检查应用于潜水的实际CSS。另外，您试图显示的类是动态确定的，它看起来像来自您的示例。我更新了我的问题，如果可能的话，我将尝试组合一个JSFIDLE来显示更多的问题。我以前从未做过。@NickBailey是的，类也是动态确定的

<div>
    <div class="showDiv">showDiv</div>
    <div class="showDiv">showDiv</div>
    <div class="showDiv">showDiv</div>
</div>

<div>
    <div class="myClass">myClass 1</div>
    <div class="myClass">myClass 2</div>
    <div class="myClass">myClass 3</div>
</div>