Wie kann ich JS umschalten. Text

Question

Ich habe diese Funktion, die das ALT eines Bildes auf img Klicken zeigt. Wie kann ich diese Funktion umschalten und die #show ausblenden, wenn es einen Self.close-Klick gibt, der den Leuchtkasten verbirgt?

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

Vielen Dank im Voraus.

Answer 1

Sie brauchen, um zu verfolgen, welchen Staat es ist derzeit in Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber das ist wahrscheinlich die einfachste.

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

Eine einfache Lösung:

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

Sie können dies tun, indem Sie den Text auf nichts einstellen, wenn sie mit gefüllt ist:

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

Beispiel:

$('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:
Eine andere Lösung könnte Um eine CSS-Klasse umzuschalten:

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