如何隐藏某些孩子（）。 的parent（）。 div？

Question

当用户单击我做出的选择菜单时，我只想显示div.card1

<table id="flowerTheme">
  <tr>
    <td>
      <div class="card1">
         <div class="guess"><a href="#" id="flower1" class="quickFlipCta"><img src="Test Pictures/QuestionMark.gif" /></a></div>
         <div class="remember"><a href="#" class="quickFlipCta"><img src="Test Pictures/flower.gif" /></a></div>
      </div>
    </td>
    <td>
      <div class="card2">
         <div class="guess"><a href="#" id="flower1" class="quickFlipCta"><img src="Test Pictures/QuestionMark.gif" /></a></div>
         <div class="remember"><a href="#" class="quickFlipCta"><img src="Test Pictures/flower.gif" /></a></div>
      </div>
    </td>
  </tr>
</table>

我有一个函数，当用户单击图像时切换“选定”类。 以下内容非常适用：

if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
    $('#flowerTheme').css('display', 'inline');

但是，如前所述，我希望不显示card2 。 我努力了：

if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
        $('#flowerTheme').not('.card2').css('display', 'inline')

但这没有任何作用。 我也尝试过：

if($('.flowerThemePic').hasClass('selected') && $('.sixCardLayout').hasClass('selected')) {
        $('#flowerTheme').find('div').not('.card2').css('display', 'inline')

但这隐藏了两个卡。 显示card1而不是card2的正确方法是什么？

Answer 1

关于什么 ：

$('#flowerTheme .card2').hide();

？

Answer 2

$('#flowerTheme').css('display', 'inline');
$('.card2').hide();

Answer 3

首先，在我看来， card1和card2应该是id ，而不是class 。 区别在于，ID应该是唯一的，而类应该被重用。 由于您使用的是card1和card2来唯一标识这些卡，因此它们应该是ID。 此外，他们可能还需要一个类：可能是class="card" ，因此可以将它们称为组。

其次，我认为您应该使用CSS而不是jQuery进行实际的隐藏/显示。 考虑一下：

table#flowerTheme.selection-made :not(.selected) .card
{
    display: none;
}

这将隐藏任何具有class="card"元素，而该元素没有任何具有class="selected"父元素。 注意#flowerTheme上的#flowerTheme .selection-made #flowerTheme这允许默认情况下显示每张卡片，但是当有人单击时，您执行$('#flowerTheme').addClass('selection-made'); 然后$(this).addClass('selected'); （假设您正在使用$(wherever selected goes).click() ）。 从您的问题中还不清楚确切地将selected类添加到何处，但是我建议以这种方式进行。 它更容易维护，jQuery要做的工作更少，并且为您提供了一种扩展卡列表的非常简单的方法。

Answer 4

您可以编写一个JavaScript函数来隐藏孩子...

function hideSpecificChildren(childClass){
     var child = document.getElementByClass(childClass);
     if(tab.style.display == "block") {
        tab.style.display = "none";
     }else {
    tab.style.display = "block";
     }
}

Answer 5

尝试这个：

$('#flowerTheme .card2').css('display','none').parent().show();

演示版

要么

$('#flowerTheme .card2').hide().parent().show();

演示版