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"的元素。请注意.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();

<强> Demo

或

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

<强> Demo

如何隐藏某些孩子（）。父母（） DIV？

5 个答案: