Ich versuche, einen Linktext und -inhalt umzuschalten, wenn der Benutzer auf den Link klickt.

Ich habe so etwas wie

<a id='link' href='#'>click me</a>
<div id='items'>
   <h1>title here</h1>   
   <p>texts here...</p>
</div>

 $('#link').on('click', function(e){
     e.preventDefault();       
     $(this).text('isClicked');
     $('#items').empty().html("<img src='images/image.png'/>")
 })

Wenn der Benutzer auf den Link klickt, wird der Linktext zu isClicked und der HTML-Code items wird durch ein Bild ersetzt. Wenn der Benutzer jedoch erneut klickt, möchte ich, dass sich der Linktext wieder in click me ändert und items das Bild ausblendet und den Inhalt der Tags title und p erneut anzeigt .

Ich bin mir nicht sicher, wie ich das erreichen soll. Kann mir jemand dabei helfen? Vielen Dank!

0
FlyingCat 3 Dez. 2013 im 22:56

6 Antworten

Beste Antwort

Sie können dem Link eine Dummy-Klasse hinzufügen und mit dieser Bedingung arbeiten

//Have a dummy class added to the link and toggle it on click
 $('#link').on('click', function(e){
     e.preventDefault();       
     var $this = $(this),
         $textDiv = $('#items'),
         $imageDiv = $('#image')
     if($this.hasClass('clicked')) {
         // remove the class
         $this.removeClass('clicked');
         // change the text 
         $this.text('click me');
         // Hide image 
         $imageDiv.addClass('hide');         
         // show text 
          $textDiv.removeClass('hide'); 

     } else {
         // remove the class
         $this.addClass('clicked');
         // change the text 
         $this.text('isClicked');
         // Show image
         $imageDiv.removeClass('hide');         
         // Hide text 
          $textDiv.addClass('hide'); 
     }
 });

Geige prüfen

Sie können auch die Methoden verketten, die auf dasselbe Element angewendet werden.

1
Sushanth -- 3 Dez. 2013 im 20:01

Versuchen Sie so etwas:

HTML:

<a id='link' href='#'>click me</a>
<div id='items'>
    <h1 class="text-item">title here</h1>   
    <p class="text-item">texts here...</p>
    <img src="images/images.png" alt="Image" />
</div>

CSS:

img {
    display: none;
}

JavaScript:

$('#link').off().on('click', function(e) {
    e.preventDefault();
    if($('#items > img').is(':visible')) {
        $(this).text('click me');
        $('#items > img').hide(); 
        $('#items > .text-item').show();       
    } else {      
        $(this).text('isClicked');
        $('#items > .text-item').hide();
        $('#items > img').show();
    }
 });

Geige

1
War10ck 3 Dez. 2013 im 19:15

Was ist mit einem CSS-Ansatz?

Ihr HTML würde gleich bleiben:

<a id='link' href='#'>click me</a>
<div id='items'>
   <h1>title here</h1>   
   <p>texts here...</p>
</div>

Aber wir können hier .toggleClass () verwenden, um unser Leben einfacher zu machen

$('#link').on('click', function(e){
     e.preventDefault();       
     $(this).text('isClicked');
     $('#items').toggleClass('display-image');
 })

Das CSS würde folgendermaßen aussehen:

#items.display-image > h1,
#items.display-image > p,
{
     visibility:hidden;
}
#items.display-image{
     background-image:url("/images/image.png");
}

Auf diese Weise müssen Sie sich keine Gedanken über das Entfernen von Dingen machen, und .toggleClass übernimmt deren Sichtbarkeit.

Möglicherweise müssen Sie zusätzliche Stile ausführen, damit das Bild ordnungsgemäß funktioniert, oder Sie können ein weiteres Element hinzufügen, das das Bild enthält, und Sie können einfach die Sichtbarkeit oder die Anzeigeeigenschaft festlegen

1
tedwards947 3 Dez. 2013 im 19:09

Sie können versuchen, den Wert in einer Variablen zu speichern und dann in den Funktionen selbst ein- und ausschalten.

 var initialState = $('#items').html(),  
 functionBla(e) {
     e.preventDefault();       
     $(this).text('isClicked');
     $('#items').empty().html("<img src='images/image.png'/>")   
     $('#link').off('click').on('click', functionCla);  
 },
 functionCla(e) {
     e.preventDefault();       
     $(this).text('click');
     $('#items').html(initialState);  
     $('#link').off('click').on('click', functionBla);  
 };

 $('#link').on('click', functionBla);
1
Santiago Rebella 3 Dez. 2013 im 19:28

Sie können es tun,

$('#link').on('click', function(e){
 e.preventDefault();       
 $(this).text('isClicked');
 $('#items').children().toggle();
 var img=$('#items img');
 if(img.length>0){
     img.remove();
 }
 else{
     $('#items').append("<img src='images/image.png' />");
    $(this).text('Click me');
 }


})
0
Mat J 3 Dez. 2013 im 19:08
$('#link').on('click', function(e){
    e.preventDefault();
    if ($(this).text() == "isClicked") {
        $(this).text("click me");
        .. etc
    } else {
        $(this).text('isClicked');
        $('#items').empty().html("<img src='images/image.png'/>")
    }
});

Verwenden Sie, wie ich in meinem Kommentar sagte, eine Bedingung wie diese. Einfach und effektiv.

1
Sterling Archer 3 Dez. 2013 im 19:01