Question

我遇到了一个我一直在做的小网站的问题;我想要一种“流”容器，其中包含“内容”的“卡片”，其中“内容”是一些“文本”以及一些“统计信息”。

这是我目前拥有的HTML：

<div id="stream">
  <div class="card">
    <div class="content">content
      <div class="text">
        blahblahblah
      </div>
      <div class="stats">
        blahblahblah
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="content">content
      <div class="text">
        blahblahblah
      </div>
      <div class="stats">
        blahblahblah
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="content">content
      <div class="text">
        blahblahblah
      </div>
      <div class="stats">
        blahblahblah
      </div>
    </div>
  </div>
</div>

最终，我希望用户能够将“卡片”添加到此“流”中。

然而，现在，我正在尝试实现一些jQuery函数来隐藏卡的“统计数据”，直到它被点击为止。因此，在统计信息的CSS中将display设置为none后，我在javascript文件中创建了这个：

$(document).ready(function(){
    $("#stream, div.card").click(function() {
  		$(this).find($("div.stats")).show();
	});
});

有点有效;在我点击卡片之前，卡片的统计数据是隐藏的。但是，当我点击一张卡片时，会显示所有卡片的统计数据。

我希望以某种方式使得点击的特定卡也是（唯一）显示的卡。显然，我这样做的当前方式打开了所有这些，因为jQuery我一次选择了所有的卡;我该如何解决这个问题？

如果有人提出这个问题，我再次道歉;我似乎找不到类似的东西，我真的希望这个工作。。。

P.S。我试图搜索这个特定的实例;很多建议只是给divs id，但是当我最终希望用户预先添加卡片时，这会感到不方便吗？

Answer 1

您的选择器 - ＆gt;

"#stream, div.card"

基本上要求所有#stream和所有div.card .. 但你真正的意思是，找到div.card内的所有#stream。这将是，（也就是没有，）。

"#stream div.card"

另外你jquery发现并不要求你转换成jquery对象，所以find（＆＃34; div.stats＆＃34;）就可以了。

尝试从容器div

1 个答案: