Count likes Taste wie in der Demo

Kann mir bitte jemand sagen, wie kann ich eine Herz-Taste wie in this demo blog erstellen?Count likes Taste wie in der Demo

Und wie Likes auf Mausklick zu zählen, nicht Maus Hover?

Quelle

2016-08-01 justtme

Sie können dies wie Schaltfläche in https://design.google.com/icons/ –

erhalten Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu kodieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

in Ihrem HTML

<div class="tbp-hrt-container"> 
    <div class="tbp-hrt finish" href="http://uno.thebasicpage.com/2016/01/home-office.html" data-id="1"></div> 71 
</div>

in Ihrem CSS-Datei

@import http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css; 


.tbp-hrt-container { 
    width: auto; 
    margin: 0; 
    display: inline-block; 
    height: 21px; 
    line-height: 21px; 
} 

.tbp-hrt { 
    position: relative; 
    text-align: center; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
    font-size: 13px!important; 
} 

.tbp-hrt.finish:before { 
    color: #e65a47; 
    content: "\f004"; 
    font-weight: 400!important; 
    font-family: fontawesome; 
} 

.tbp-hrt.finish:after { 
    color: #000; 
    font-weight: 400!important; 
} 
.tbp-hrt:after { 
    content: attr(data-amount) ""; 
    font: normal normal 11px Martel Sans, sans-serif; 
    color: #000000; 
    background: transparent; 
    border-radius: 0; 
    display: inline-block; 
    margin: 0 0 0 10px; 
    padding: 0 10px; 
}

Quelle

2016-08-01 12:39:10

Leider funktioniert das nicht. Die Anzahl der Likes beim Mouse-Hovern wird mit jQuery (glaube ich) und die _finish_ Klasse nur dann angezeigt, wenn Sie den Mauszeiger über die Heart-Taste bewegen. Was ich wissen wollte, ist wie man Likes per Mausklick zählt. – justtme

können Sie fontawsome verwenden, die kompletten Satz von 634 Icons enthält (http://fontawesome.io/icons/)

HTML

<i class="fa fa-heart" aria-hidden="true" id="heart" onClick="like()"></i>

und Javascript für das Mausklickereignis

var likeCount = 10; 

function like(){ 
    likeCount++; 
}

Sie sollten font-awsomes als Bilder verwenden, um Ihre Seiten zu reduzieren Größe, weil font-awsomes ist wie Schriftarten verwenden.

Quelle

2016-08-01 12:43:13

Count likes Taste wie in der Demo

Antwort

Verwandte Themen