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

まず第一に、ではなくであるべきだとcard1私には見えます。違いは、ID は一意であることが想定されているのに対し、クラスは再利用されることが想定されていることです。これらのカードを一意に識別するためにandを使用しているため、それらは ID である必要があります。さらに、それらはおそらくクラスも必要とするでしょう: おそらくであるため、グループとして参照することができます。card2idclasscard1card2class="card"

第二に、実際の非表示/表示には jQuery ではなく、CSS を使用する必要があると思います。このことを考慮：

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 の作業が減り、カードのリストを拡張するための非常にシンプルで簡単な方法が得られます。

于 2012-07-30T17:54:13.373 に答える
2

どうですか :

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

?

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

これを試して：

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

デモ

また

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

デモ

于 2012-07-30T18:11:55.973 に答える
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 に答える