Question

我有多张图片，每张图片都有自己的按钮。我试图获取被点击的按钮的值以更改为＆＃34;隐藏＆＃34;当图像（对应）可见但显示＆＃34;显示＆＃34;当图像（对应）被隐藏时。只有一个按钮按预期工作。关于如何实现这一点的任何想法。

＆＃13;

$(document).ready(function() {
  $(".hideAndShow").click(function() {
    var clickValue = $('.hideAndShow').attr('value');
    $(".imager img").eq($(this).index()).toggle();
    if (clickValue == 'Hide') {
      $('.hideAndShow').eq($("img:hidden").index()).attr('value', 'Show');
    } else if (clickValue == 'Show') {
      $('.hideAndShow').eq($("img:visible").index()).attr('value', 'Hide');
    }
  });
});

＆＃13;

.imager {
  display: inline-block;
  margin: 0 50px 25px 50px;
  width: 200px;
  height: 200px;
}
.imager img {
  height: 100%;
  auto: auto;
  background: green;
  padding: 0 50px 25px 50px;
}
.hideAndShow {
  cursor: pointer;
  font-weight: bold;
  font-size: 24px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imager">
  <img src="xid-57735235_1.jpg" width="620" height="453" alt="" />
  <input type="button" class="hideAndShow" value="Hide">
</div>

<div class="imager">
  <img src="xid-57735236_1.jpg" width="620" height="410" alt="" />
  <input type="button" class="hideAndShow" value="Hide">
</div>

＆＃13;

Answer 1

为什么让事情变得复杂？使用this是正确的方法。只需使用短函数：

＆＃13;

$(document).ready(function() {
  $(".hideAndShow").click(function() {
    if ($(this).prev("img").is(":visible")) {
      $(this).prev("img").hide();
      $(this).val("Show");
    } else {
      $(this).prev("img").show();
      $(this).val("Hide");
    }
  });
});

＆＃13;

.imager {
  display: inline-block;
  margin: 0 50px 25px 50px;
  width: 200px;
  height: 200px;
}
.imager img {
  height: 100%;
  auto: auto;
  background: green;
  padding: 0 50px 25px 50px;
}
.hideAndShow {
  cursor: pointer;
  font-weight: bold;
  font-size: 24px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imager">
  <img src="xid-57735235_1.jpg" width="620" height="453" alt="" />
  <input type="button" class="hideAndShow" value="Hide">
</div>

<div class="imager">
  <img src="xid-57735236_1.jpg" width="620" height="410" alt="" />
  <input type="button" class="hideAndShow" value="Hide">
</div>

＆＃13;

根据图像可见性更改按钮值

1 个答案: