Question

我有多个图像，我想只在用户点击图像时显示图像信息，并在用户点击关闭按钮时隐藏图像。请帮我。这是我的代码 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();
});

Answer 1

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

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

Answer 2

解决方案应该是：

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

    e.stopPropagation();
});

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

Answer 3

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

＆＃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;

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

＆＃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;

Answer 4

以下是演示：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库

Answer 5

这里是更新的代码

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

Jquery显示隐藏文字图像点击

5 个答案: