JS .textを切り替えるにはどうすればいいですか

Question

私はimg clickで画像の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

は、あなたはそれが現在だその状態を追跡する必要があり、これを行うためのいくつかの方法がありますが、これはおそらく最も簡単です：。

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 2

シンプルなソリューション：

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

EDIT：
別の解決策のかもしれないが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">