Jquery显示隐藏文字图像点击

时间：2017-06-18 16:48:53

标签： jquery html twitter-bootstrap

我有多个图像，我想只在用户点击图像时显示图像信息，并在用户点击关闭按钮时隐藏图像。 请帮我 。 这是我的代码 HTML 

<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6 ">
                    <div class="img__wrap" >
                        <img src="./images/RaviDhariwal.jpg" alt="team" class="img-responsive img__img" >
                        <div class="img_person">
                            <p class="name-pos">RAVI DHARIWAL</p>
                            <p class="designation">CHAIRMAN</p>
                        </div>
                        <div class="img__description" data-popup="popup-1">
                            <div class="float-right popup-closeimg close-hover" data-toggle="popover">X</div>
                            <div class="img-desc-title">RAVI DHARIWAL</div>

                            <div class="designation">CHAIRMAN</div>
                            <div class="person_detail">
                                An IIT/K, IIMC alumnus, Ravi started his career with Unilever in India, and, went on to head Soaps marketing when he joined PepsiCo as its first employee in India. 
                            </div>
                        </div>
                    </div>

JQuery的

   $('.img__wrap').on('click', function(e)  {
    $(this).find('.img__description').css("opacity",1);
    // e.preventDefault();
});

$('.close-hover').on('click', function(e)  {
    $(this).parent('.img__wrap').css("opacity",0);

    // e.preventDefault();
});

5 个答案:

答案 0 :(得分：0)

如何使用切换（显示/隐藏），而不是不透明度？

$('.img__wrap').on('click', function(e) {
    $(this).find('.img__description').toggle();
});

这样，他们可以重新点击图片来隐藏desc，或者使用关闭按钮。如果你只想让他们在点击时打开desc，那么使用.show（）而不是.toggle（）。

关闭按钮应该是（我不认为你的意思是在现有代码中引用.img_wrap - 只需得到.parent（） - 很简单）：

$('.close-hover').on('click', function(e)  {
    $(this).parent().hide();
});

答案 1 :(得分：0)

解决方案应该是：

$('.close-hover').on('click', function(e)  {
    $(this).parent().css("opacity",0);

    e.stopPropagation();
});

我在这里看到一些不一致的地方。您正在更改.img__description的不透明度，然后更改.img__wrap

答案 2 :(得分：0)

尝试使用$(this).closest('.img__wrap').css("opacity", 0);

＆＃13;
＆＃13; 
$('.img__wrap').on('click', function(e) { 
  $(this).find('.img__description').css("opacity", 1);
  // e.preventDefault();
});

$('.close-hover').on('click', function(e) { 
  $(this).closest('.img__wrap').css("opacity", 0);

  // e.preventDefault();
});
＆＃13; 
.img__description{
  opacity:0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6 ">
  <div class="img__wrap">
    <img src="./images/RaviDhariwal.jpg" alt="team" class="img-responsive img__img">
    <div class="img_person">
      <p class="name-pos">RAVI DHARIWAL</p>
      <p class="designation">CHAIRMAN</p>
    </div>
    <div class="img__description" data-popup="popup-1">
      <div class="float-right popup-closeimg close-hover" data-toggle="popover">X</div>
      <div class="img-desc-title">RAVI DHARIWAL</div>

      <div class="designation">CHAIRMAN</div>
      <div class="person_detail">
        An IIT/K, IIMC alumnus, Ravi started his career with Unilever in India, and, went on to head Soaps marketing when he joined PepsiCo as its first employee in India.
      </div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

如果你想隐藏并显示你可以简单地切换课程$(this).find('.img__description').toggleClass("hidden");

＆＃13;
＆＃13; 
 $('.img__wrap').on('click', function(e)  {
    $(this).find('.img__description').toggleClass("hidden");
    // e.preventDefault();
});

$('.close-hover').on('click', function(e)  {
    $(this).closest('.img__wrap').css("opacity",0);

    // e.preventDefault();
});
＆＃13; 
.hidden{
  display:none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6 ">
  <div class="img__wrap">
    <img src="./images/RaviDhariwal.jpg" alt="team" class="img-responsive img__img">
    <div class="img_person">
      <p class="name-pos">RAVI DHARIWAL</p>
      <p class="designation">CHAIRMAN</p>
    </div>
    <div class="img__description" data-popup="popup-1">
      <div class="float-right popup-closeimg close-hover" data-toggle="popover">X</div>
      <div class="img-desc-title">RAVI DHARIWAL</div>

      <div class="designation">CHAIRMAN</div>
      <div class="person_detail">
        An IIT/K, IIMC alumnus, Ravi started his career with Unilever in India, and, went on to head Soaps marketing when he joined PepsiCo as its first employee in India.
      </div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

以下是演示：https://codepen.io/rearmustak/pen/BZpEaX 你可以在这里找到解决方案

<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6 ">
  <div class="img__wrap" >
    <img src="http://via.placeholder.com/350x150" alt="team" class="img-responsive img__img" >
    <div class="img_person">
      <p class="name-pos">RAVI DHARIWAL</p>
      <p class="designation">CHAIRMAN</p>
    </div>
    <div class="img__description" data-popup="popup-1">
      <div class="float-right popup-closeimg close-hover" data-toggle="popover">X</div>
      <div class="img-desc-title">RAVI DHARIWAL</div>

      <div class="designation">CHAIRMAN</div>
      <div class="person_detail">
        An IIT/K, IIMC alumnus, Ravi started his career with Unilever in India, and, went on to head Soaps marketing when he joined PepsiCo as its first employee in India. 
      </div>
    </div>
  </div>

使用此css代码

.img__description{
  display: none;
}
.close-hover{
  cursor: pointer;
}

这是jquery代码：

$('.img__wrap img').on('click', function(e)  {
    $('.img__description').fadeIn();
    // e.preventDefault();
});

$('.close-hover').on('click', function(e)  {
    $(this).parent('.img__description').fadeOut();

    // e.preventDefault();
});

调用jquery库

答案 4 :(得分：0)

这里是更新的代码

HTML 

<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6 ">
                    <div class="img__wrap" >
                        <img id="img_1" src="./images/RaviDhariwal.jpg" alt="team" class="img-responsive img__img" >
                        <div class="img_person">
                            <p class="name-pos">RAVI DHARIWAL</p>
                            <p class="designation">CHAIRMAN</p>
                        </div>
                        <div id="des_img_1" class="img__description" data-popup="popup-1">
                            <div class="float-right popup-closeimg close-hover" data-toggle="popover">X</div>
                            <div class="img-desc-title">RAVI DHARIWAL</div>

                            <div class="designation">CHAIRMAN</div>
                            <div class="person_detail">
                                An IIT/K, IIMC alumnus, Ravi started his career with Unilever in India, and, went on to head Soaps marketing when he joined PepsiCo as its first employee in India. 
                            </div>
                        </div>
                    </div>

JQuery的

   $('.img_1').on('click', function(e)  {
    $('.des_img_1').show();
    // e.preventDefault();
});

$('.close-hover').on('click', function(e)  {
    $('.des_img_1').hide();    
    // e.preventDefault();
});
相关问题
最新问题