如何切换JS .text

Question

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

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

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

一个简单的解决方案：

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

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

例：

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

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

编辑：
另一个解决方案可能是切换CSS类：

 // Set the alt text $('span').text($(this).attr('alt')); $('img').on('click', function () { $('span').toggleClass('hide'); }); 

 .span { display: none; } 

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