Hinzufügen von Elementen zu einem Zustand zu ändern Taste Html

/* css for button to change size on click */ 
.button:focus { 
    width: 99%; 
    height: 500px; 
    } 

//below is the script that handles the auto scroll to the button clicked on screen. 
    $(document).ready(function() { 
$('.button').click(function() { 
    $('html,body').animate({ scrollTop: $(this).offset().top - (($(window).height()/1.5) - $(this).outerHeight(true))/2 }, 2000); 
    $(this).empty(); //empty title and author to prepare for recipe 
     $(this).append("Recipe Instructions Below"); 

}); 
});

Auf einer Website, die ich baue ich ziehe die aktuellsten Informationen in die Datenbank aufgenommen und jede Zeile in einer Schaltfläche angezeigt, die angeklickt werden kann. Mein Ziel hier ist, dass der Button um 100px um 60px startet und wenn "focused" angeklickt wird, wird er auf die Breite des Bildschirms wachsen.Hinzufügen von Elementen zu einem Zustand zu ändern Taste Html

Wenn ich jetzt auf die Schaltfläche klicke, möchte ich die Schaltfläche leeren und durch weitere Informationen aus der Datenbank ersetzen, d. H. Die Anweisungen für das Rezept angeklickt. Wenn ich dann nicht fokussiere oder aus dem Knopf klicke, möchte ich, dass es in seinen ursprünglichen Zustand zurückkehrt, wo es nur den Namen des Rezepts und den Autor anzeigt.

Die Art, wie ich das sehe, ist, dass die Tasten Objekte sind, aber ich denke, das ist sehr falsch. Wenn möglich, kann mir jemand eine Rückmeldung geben, ob es eine kluge und effektivere Möglichkeit gibt, dies zu tun, da mein einziges Problem darin besteht, dem Knopf weitere Elemente hinzuzufügen, wenn er angeklickt wird. Ich würde wirklich jede Rückmeldung schätzen.

Hier ist eine kleine Demo https://jsfiddle.net/DxKoz/twj7m2sb/1/

Quelle

2016-04-06 Nathan

Das die Sache tun sollten.

$(document).ready(function() { 
    $('.button').click(function() { 
    var btn = $(this); 
    $('html,body').animate({ 
     scrollTop: $(this).offset().top - (($(window).height()/1.5) - $(this).outerHeight(true))/2 

    }, 2000, 
    function() { 
     btn.html("Recipe Instructions Below"); //html() so you don't have to use empty() 
    }); 

});

Wenn Sie weitere Schaltflächen hinzufügen müssen, dann verwenden for Schleife, Namen jeder Taste mit id = Loop-Nummer. Zum Beispiel:

for(var i=1; i<buttons.length; i++) { 
    $('#buttons-list').append('<button id="' + i + '">' + Recipe Name + Author Name + '</button>'); 
} 

$('button').click(function() { 
    var button_nr = $(this).id; 
    $('#'+button_nr).html("Recipe Instructions Bellow"); //html() so you don't have to use empty() 
});

var button_nr = $(this).id Verwenden Sie können Anzahl der Taste, und dann zum Beispiel speichern Rezepte in Array und von button_nr drucken Sie es.

Quelle

2016-04-06 17:23:32 Oen44

Ich würde nicht leer verwenden. Stattdessen sollten Sie zwei DIVs innerhalb Ihrer Schaltflächenklasse verwenden und ihre Sichtbarkeit basierend auf dem aktiven Status Ihrer Schaltfläche umschalten. Verwenden Sie dazu die Ereignisse onclick und blur. Da Sie jQuery verwenden, können Sie Kinder() verwenden, um die Klassen innerhalb der Taste Ziel (falls Sie mehr als eine auf einer Seite wird es nicht alle von ihnen auslösen.)

Siehe https://jsfiddle.net/jzuegnkx/1/

HTML:

<body> 
<button class="button"> 
    <div class="title"> 
    Recipe name<br /> 
    By: Author 
    </div> 
    <div class="details"> 
    Recipe Details 
    </div> 
</button> 
</body>

CSS:

ich habe nur eine Klasse, Details zur Anzeige auf Standard: keine.

.details { 
    display: none; 
}

Javascript:

$(document).ready(function() { 
    $('.button').click(function() { 
    $('html,body').animate({ scrollTop: $(this).offset().top - (($(window).height()/1.5) - $(this).outerHeight(true))/2 }, 2000); 
     //$(this).empty(); //empty title and author to prepare for recipe. 
     //$(this).append("Recipe Instructions Below"); 
    $(this).children('.title').hide(); 
    $(this).children('.details').show(); 
    }); 
    $('.button').blur(function() { 
    $(this).children('.details').hide(); 
    $(this).children('.title').show(); 
    }); 
});

Quelle

2016-04-06 17:32:02 Sterling

Wow, vielen Dank. Dies ist ein perfekter Ansatz für mich, um die Informationen, die ich aus der Datenbank ziehe, anzuzeigen und zu verbergen. Vielen Dank. – Nathan

Hinzufügen von Elementen zu einem Zustand zu ändern Taste Html

Antwort

Verwandte Themen