单击图像时 jQuery 显示/隐藏文本答案

【问题标题】：jQuery Show/Hide Text When Clicking Images单击图像时 jQuery 显示/隐藏文本
【发布时间】：2013-06-06 23:03:44
【问题描述】：

我有三个用作按钮的图像。每个人都有相同的班级。当我单击图像时，我希望文本“Active”出现在其下方（在图像所在的 div 之外）。每个图像下的文本都是相同的，但是如果我单击另一个图像，我希望文本隐藏它一直显示的位置并显示在我刚刚单击的图像下。现在，我点击一张图片，“活动”出现在所有三个图片下方，我再次点击，所有三个都消失了。我哪里错了？

脚本：

<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>`

【问题讨论】：

标签： jquery show-hide

【解决方案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();
        });
    });

【讨论】：

【解决方案2】：

你只是把事情复杂化了。

这应该可以完成工作

$(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();

    });
});

Check Fiddle

【讨论】：

这就像一个魅力。当我转动轮子试图弄清楚时，很容易使事情变得过于复杂。这比我所拥有的要简单得多。谢谢！

【解决方案3】：

jsFiddle Demo

其他解决方案似乎无法正确切换。如果您希望您的活动在单击时切换，并在单击另一个区域时切换到该区域，您应该使用toggle 加上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();
});

【讨论】：