Wie kann man in HTML ein Bild austauschen und einen Text-Zahlenwert
verändern?
Aufgabe:
Ich möchte beim Klicken auf einen Button ein eingebettetes
Bild des Buttons verändern und den nebenstehenden Text als Zahl erhöhen oder
erniedrigen.
Lösung:
Die Lösung der Änderungen zu Laufzeit werden mit
javascript oder jQuery auf der Webseite durchgeführt.
HTML-Text in Zahl, Zähler ändern:
Ein Text auf einer Webseite wird mit jQuery .text() aus
dem Span-HtmlElement gelesen.
Anschliessend kann man mit Number(String) eine Zahl in
eine echte Nummer umwandeln.
|
var
counter_Follow = $("#divCount_Follows").text();
counter_Follow
= Number(counter_Follow);
|
Diese kann anschliessend als Nummer erhöht oder verkleinert
werden.
Abschliessend kann man die Zahl mit der jQuery .text(Zahl)
wieder in ein HTML Element einbetten
|
counter_Follow
= counter_Follow + 1;
$("#divCount_Follows").text(counter_Follow);
|
Button Image ändern
Ein Link oder Button Image kann mit jQuery Attribute(..)
geändert werden.
Zum Lesen, welches Bild in einem HTMLElement eingebettet
ist, kann man das Attribute HtmlElement.src lesen
Image Lesen
|
$("#imgFollow").attr("src")
|
Man kann ein anderes Bild einem Button oder HtmlTag
zuweisen mit der jQuery.HtmlElement.attribute Methode und dem zweiten Parameter
Image Ändern
|
$("#imgFollow").attr("src", "/images/Ico/icoPin.png");
|
Ändern, wenn Bild nicht grau, dann auf das Graue Icon
wechseln
|
if ($("#imgFollow").attr("src").indexOf("gray") > 0)
{ $("#imgFollow").attr("src", "/images/Ico/icoPin.png"); }
|
jQuery und javascript function zum Ändern der Zahl und
des Images
mit jQuery und javascript
|
<script>
function Follow()
{
//----<
Follow() >----
var
counter_Follow = $("#divCount_Follows").text();
counter_Follow =
Number(counter_Follow);
if ($("#imgFollow").attr("src").indexOf("gray") > 0)
{
counter_Follow =
counter_Follow + 1;
$("#divCount_Follows").text(counter_Follow);
$("#imgFollow").attr("src", "/images/Ico/icoPin.png");
}
else {
counter_Follow = counter_Follow
- 1;
$("#divCount_Follows").text(counter_Follow);
$("#imgFollow").attr("src", "/images/Ico/icoPin_gray.png");
}
//----</ Follow() >----
}
</script>
|
Beispiel-Code:
Kompletter
HTML, jQuery und javascript Code
HTML
mit Scrpt in jQuery und javascript
Asp.Net
Core Razor View
|
@*--------< Like
>--------*@
<style>
.divInteract {
/*display:flex;*/
/*flex-direction:column;*/
/*padding: 6px;*/
font-size:small;
color:gray;
}
.interact {
padding: 6px;
background: rgba(0,0,0,0.1);
}
.interact:hover {
opacity: 0.7;
}
.interact-img {
height: 30px;
width: 30px;
}
.like { }
</style>
<div class="divInteract">
<br />
<button type="button" id="btnFollow" class="like" title="abo pin follow" onclick="Follow();"><img id="imgFollow" src="~/images/Ico/icoPin_gray.png" class="interact-img" /></button>
<span id="divCount_Follows">1234
@{ if (@Model.Note.sumFollows > 0){ @Model.Note.sumFollows ; }}
</span>
<br />
<button type="button" id="btnLike" class="like" title="Like it" onclick="Like();"> <img src="~/images/Ico/icoLike_gray.png" class="interact-img" /></button>
@{ if (@Model.Note.sumLikes > 0)
{ Html.Raw("(" + Model.Note.sumLikes + ")"); }
}
<br />
<button type="button" id="btnDislike" class="like" title="Copy Link and Share to your ID
" onclick="Dislike();"> <img src="~/images/Ico/icoDislike_gray.png" class="interact-img" /></button>
@{ if (@Model.Note.sumDislikes > 0)
{ Html.Raw("(" + Model.Note.sumDislikes + ")"); }
}
<br />
<button type="button" id="btnComment" class="like" title="Comment" onclick="Comment();"> <img src="~/images/Ico/icoComment_gray.png" class="interact-img" /></button>
@{ if (@Model.Note.sumComments > 0)
{ Html.Raw("(" + Model.Note.sumComments + ")"); }
}
</div>
<script>
function Follow()
{
//----< Follow() >----
var counter_Follow = $("#divCount_Follows").text();
counter_Follow =
Number(counter_Follow);
if ($("#imgFollow").attr("src").indexOf("gray") > 0) {
counter_Follow =
counter_Follow + 1;
$("#divCount_Follows").text(counter_Follow);
$("#imgFollow").attr("src", "/images/Ico/icoPin.png");
}
else {
counter_Follow =
counter_Follow - 1;
$("#divCount_Follows").text(counter_Follow);
$("#imgFollow").attr("src", "/images/Ico/icoPin_gray.png");
}
//----</ Follow() >----
}
</script>
@*--------</ Like
>--------*@
</div>
@*--------</ DivRight
>--------*@
|