Question

我有这个功能，可以在img点击上显示图像的ALT。如何在隐藏灯箱的Self.close点击时切换此功能并隐藏#show？

＆＃13;

$("img").on("click", function() {
  $("#show").text($(this).attr("alt"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">

＆＃13;

提前致谢。

Answer 1

一个简单的解决方案：

＆＃13;

$("img").on("click", function() {
    var alt = $(this).attr("alt");
    $("#show").text($("#show").text() === alt ? '' : alt);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">

＆＃13;

Answer 2

你需要跟踪它目前所处的状态。有很多方法可以做到这一点，但这可能是最简单的方法：

var isShowingText = false;
$("img").on("click", function() {
  if (isShowingText) {
    $('#show').text('');
  } else {
    $("#show").text($(this).attr("alt"));
  }
  
  // Toggle the flag. false becomes true, true becomes false
  isShowingText = !isShowingText;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">

Answer 3

您可以通过使用以下方式将文本设置为空来执行此操作：

$('#show').text('');

示例：

＆＃13;

$('img').on('click', function () {
  $('#show').text($('#show').text() === '' ? $(this).attr('alt') : '');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show"></div>
<img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">

＆＃13;

修改
另一种解决方案可能是切换CSS类：

＆＃13;
＆＃13;
// Set the alt text $('span').text($(this).attr('alt')); $('img').on('click', function () { $('span').toggleClass('hide'); });
＆＃13;
.span { display: none; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="hide"></span> <img src="https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg" alt="SMILE">
＆＃13;
＆＃13;
＆＃13;

如何切换JS .text

3 个答案: