J'essaie de créer un compteur de clics en forme de cœur, un seul clic est autorisé et cela ajouterait 1 au nombre commençant par 1280. La forme de cœur commence sans couleur, mais lorsque vous cliquez dessus, elle passe à un cœur rouge. Voici la citation que j'ai essayée mais le nombre n'augmente pas quand je clique sur le coeur. :( :(

Quelqu'un peut-il regarder le code et dire quelle partie est incorrecte?

$('body').on('click', '.share-icons a.heart24', function(event){
	event.defaultPrevented;
	console.log('heart');

function log_quote_heart(id, place, ac_type, t, pp, current_object){
//    if(t === 't') return;

	if($(current_object).hasClass('heart24-on')){

		return;
	}

var heartLink = $('.wrap-block[data-id="'+id+'"] a.heart24');
				
				$(heartLink).removeClass('heart24-off').addClass('heart24-on');
				heartLink.html(+heartLink.html()+1);
.heart24-on {
    background: url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;
    background-size: 24px auto!important;
    border-radius: 0;
}
.heart24 a {
    font-weight: 500;
    color: #a94c1c;
}


.heart24 {text-decoration:none}
.heart24 {position:relative;top:0!important;display:inline-block;margin-right:4px;width:24px;height:24px;border-radius:50%}
.heart24 a{font-weight:500;color:#a94c1c}
.heart24-on{background:url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;background-size:24px auto!important;border-radius:0}
.heart24-off{background:url(//www.azquotes.com/public2/images/heart24-off.png) no-repeat!important;background-size:24px auto!important;border-radius:0}
.heart24{vertical-align:top;background-position-x:0;padding-left:31px;padding-top:2px;padding-bottom:0;line-height:20px;font-size:12px}
<a class="heart24 heart24-off" href="javascript:void(0);">1280</a>
1
sunflowerhk 6 avril 2020 à 02:04

3 réponses

Consultez ma réponse s'il vous plaît:

$(function(){

            $(document).on('click', '.heart24', function(event){

                    event.preventDefault();


                    var heartCount = +$(this).text();
                    if(heartCount == 1280){
                        heartCount++;
                        $(this).removeClass('heart24-off');
                        $(this).addClass('heart24-on');
                        $(this).text(heartCount);
                    }
                    else{
                        heartCount--;
                        $(this).removeClass('heart24-on');
                        $(this).addClass('heart24-off');
                        $(this).text(heartCount);
                    }



            })

        });
1
Elman Huseynov 5 avril 2020 à 23:15

Pensez simplement à utiliser l'option .toggleClass(). Exemple de code:

$(function() {
  function toggleHeart(ev) {
    ev.preventDefault();
    var self = $(ev.target);
    var count = parseInt(self.text());
    if (self.hasClass("heart24-on")) {
      return false;
    }
    self.toggleClass("heart24-off heart24-on");
    self.html(++count);
  }

  $(".heart24").click(toggleHeart);
});
.heart24 {
  font-weight: 500;
  color: #a94c1c;
  text-decoration: none;
  position: relative;
  top: 0!important;
  display: inline-block;
  margin-right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50% font-weight: 500;
  color: #a94c1c vertical-align: top;
  background-position: 0;
  padding-left: 31px;
  padding-top: 2px;
  padding-bottom: 0;
  line-height: 20px;
  font-size: 12px
}

.heart24-on {
  background: url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;
  background-size: 24px auto!important;
  border-radius: 0
}

.heart24-off {
  background: url(//www.azquotes.com/public2/images/heart24-off.png) no-repeat!important;
  background-size: 24px auto!important;
  border-radius: 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="heart24 heart24-off" href="#">1280</a>
0
Twisty 5 avril 2020 à 23:47

Votre JS est incomplet, syntaxiquement invalide et partiellement défectueux. De plus, le fragment html ne correspondait pas aux sélecteurs que vous utilisiez dans le code.

L'extrait suivant probablement fait ce que vous voulez. Vous devrez peut-être restreindre davantage les sélecteurs pour l'élément a.heart en fonction du contexte dans votre site cible.

    $('body').on('click', 'a.heart24', function(event) {
    	event.preventDefault();
    	console.log('heart');

//***        function log_quote_heart(id, place, ac_type, t, pp, current_object) {
        //    if(t === 't') return;
        if ($(event.target).hasClass('heart24-on')) {
    	    return;
        }

        var heartLink = $('a.heart24');
    				
    	$(heartLink).removeClass('heart24-off').addClass('heart24-on');
    	$(heartLink).text(+heartLink.text()+1);
    });
    .heart24-on {
        background: url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;
        background-size: 24px auto!important;
        border-radius: 0;
    }
    .heart24 a {
        font-weight: 500;
        color: #a94c1c;
    }


    .heart24 {text-decoration:none}
    .heart24 {position:relative;top:0!important;display:inline-block;margin-right:4px;width:24px;height:24px;border-radius:50%}
    .heart24 a{font-weight:500;color:#a94c1c}
    .heart24-on{background:url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;background-size:24px auto!important;border-radius:0}
    .heart24-off{background:url(//www.azquotes.com/public2/images/heart24-off.png) no-repeat!important;background-size:24px auto!important;border-radius:0}
    .heart24{vertical-align:top;background-position-x:0;padding-left:31px;padding-top:2px;padding-bottom:0;line-height:20px;font-size:12px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
   <a class="heart24 heart24-off" href="javascript:void(0);">1280</a>
</body>
0
collapsar 5 avril 2020 à 23:29