1

ボタンとして機能する3つの画像があります。それぞれ同じクラスです。画像をクリックすると、「アクティブ」というテキストがその下に表示されます(画像が含まれるdivの外側)。各画像の下に同じテキストがありますが、別の画像をクリックすると、テキストが表示されていた場所を非表示にして、クリックしたばかりの画像の下に表示する必要があります。今、画像をクリックすると、3 つの画像すべての下に「アクティブ」が表示されます。もう一度クリックすると、3 つすべてが消えます。どこが間違っていますか？

スクリプト：

<script type="text/javascript">
$(function()
    {
        $('p.active').hide();
    });

$(function()
    {
        $('.mosaic-block').click(function(){
            $('.mosaic-block').removeClass('mosaic-block-highlighted');
            $(this).addClass('mosaic-block-highlighted');
            $('p.active').show(showHide);
        });
    });

function showHide()
    {
        var id=$(this).attr("p");

        if($(this).is(":visible"))
        {
          $(id).hide();
          $(this).html("");
        }
        else
        {
          $(id).show();
          $(this).html("ACTIVE");
        }
        return false;
    };
</script>

HTML:

<div class="imgBlock">
 <div class="mosaic-block cover">
   <div class="mosaic-overlay" style="display: block; left: 0px; bottom: 0px;">
     <img type="image" src="/images/g_crop.jpg"/>
   </div>
       <a href="javascript:;" onclick="launchX3()" id="x3" class="mosaic-backdrop" style="display:inline;">
     <div class="details">
       <h1>G Demo</h1>
           <h4>Select G</h4>
     </div>
       </a>
</div>
   <img class="button" type="image" src="/images/g_btn.jpg"/>
   <p class="active">ACTIVE</p>
</div>

<div class="imgBlock">
  <div class="mosaic-block cover">
<div class="mosaic-overlay" style="display: block; left: 0px; bottom: 0px;">
      <img type="image" src="/images/e_crop.jpg"/>
</div>
<a href="javascript:;" onclick="launchX2()" id="x2" class="mosaic-backdrop" style="display:inline;">
  <div class="details">                
    <h1>E Demo</h1>
    <h4>Select E</h4>
      </div>
</a>
  </div>
  <img class="button" type="image" src="/images/e_btn.jpg"/>
  <p class="active">ACTIVE</p>
</div>

<div class="imgBlock">
  <div class="mosaic-block cover boxgridLast">
 <div class="mosaic-overlay" style="display: block; left: 0px; bottom: 0px;">
   <img type="image" src="/images/c_crop.jpg"/>
 </div>
 <a href="javascript:;" onclick="launchX1()" id="x1" class="mosaic-backdrop" style="display:inline;">
 <div class="details">
   <h1>C Demo</h1>
   <h4>Select C</h4>
 </div>
 </a>
 </div>
     <img class="button" type="image" src="/images/c_btn.jpg"/>
     <p class="active">ACTIVE</p>
</div>`
4

3 に答える 3

1

あなたはいくつかのことをしようとしていますが、それはかなり単純化できると思います。基本的にやりたいことは、最初にすべての「アクティブな」要素を非表示にしてから、クリックしたばかりのブロック内の要素を表示することです。これを行うには、次のようにします。

$(function()
    {
        $('.mosaic-block').click(function(){
            $('.mosaic-block').removeClass('mosaic-block-highlighted');
            $(this).addClass('mosaic-block-highlighted');
            $('p.active').hide();
            $(this).find('p.active').show();
        });
    });
于 2013-06-06T23:14:01.253 に答える
0

jsFiddle Demo

他のソリューションは適切に切り替えられないようです。クリック時にアクティブを切り替え、別の領域でクリックしたときにその領域に切り替えたい場合はtoggle、 a と組み合わせて使用​​しnotて、誤った非表示を防ぐ必要があります。

$('p.active').hide();
$('.mosaic-block').click(function(){
 $('.mosaic-block').removeClass('mosaic-block-highlighted');
 $(this).addClass('mosaic-block-highlighted');
 var $thisActive = $(this.parentNode).find('.active');
 $('p.active').not($thisActive).hide();
 $thisActive.toggle();
});
于 2013-06-06T23:21:45.177 に答える
0

あなたは単に物事を複雑にしすぎています。

これは仕事をするはずです

$(function () {
    $('p.active').hide();

    $('.mosaic-block').click(function () {
        var $this =$(this);
        $('.mosaic-block').removeClass('mosaic-block-highlighted');
        $this.addClass('mosaic-block-highlighted');
        $('p.active').hide();
        // traverse to the closest `imgBlock` class and 
        //  find the p.active element and show it
        $this.closest('.imgBlock').find('p.active').show();

    });
});

フィドルをチェック

于 2013-06-06T23:14:25.880 に答える