1

我只想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？

4

5 回答 5

2

关于什么 ：

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

?

于 2012-07-30T17:44:51.543 回答
2 
$('#flowerTheme').css('display', 'inline');
$('.card2').hide();
于 2012-07-30T17:45:10.777 回答
2

首先，在我看来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-madeon #flowerTheme- 这允许默认情况下显示每张卡片，但是当有人点击时，你会这样做$('#flowerTheme').addClass('selection-made');（$(this).addClass('selected');假设你正在使用$(wherever selected goes).click()它）。从您的问题中不清楚到底在哪里selected添加了类，但我建议这样做。它更容易维护，jQuery 需要做的工作更少，它为您提供了一种非常简单的方法来扩展卡片列表。

于 2012-07-30T17:54:13.373 回答
0

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

function hideSpecificChildren(childClass){
     var child = document.getElementByClass(childClass);
     if(tab.style.display == "block") {
        tab.style.display = "none";
     }else {
    tab.style.display = "block";
     }
}
于 2012-07-30T17:58:56.857 回答
0

试试这个：

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

演示

或者

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

演示

于 2012-07-30T18:11:55.973 回答