Voici mon code jquery je veux travailler avec des identifiants différents mais la même fonction. maintenant dans mon codage, la même fonction / code est répété avec chaque identifiant différent, mais je veux créer une seule fonction pour tous les identifiants différents afin de réduire le code. Comment puis-je faire ceci ?

/$(function(){
//    
//    $('a[href^="#"') .click(function(e){
//        var target = $(this).attr('href');
//        var strip = target.slice(1);
//        var anchor = $ ("a[name='" + strip +"']");
//        e.preventDefault();
//        $('html,body').animate({
//            scrollTop: anchor.offset().top
//        },(3000));
//    });
//});
$("#get").click(function(){
    $('html, body').animate({
        scrollTop: $("#getto").offset().top
    }, 2000);
});

$("#features").click(function() {
    $('html, body').animate({
        scrollTop: $("#featuresto").offset().top
    }, 2000);
});
1
//$("#myElement").offset({left:34,top:100});

$("#portfolio ").click(function() {
    $('html, body').animate({
        scrollTop: $("#portfolioto").offset().top
    }, 2000);
});

$("#client").click(function() {
    $('html, body').animate({
        scrollTop: $("#clientto").offset().top
    }, 2000);
});

$("#work").click(function() {
    $('html, body').animate({
        scrollTop: $("#workto").offset().top
    }, 2000);
});

$("#contact").click(function() {
    $('html, body').animate({
        scrollTop: $("#contactto").offset().top
    }, 2000);
});



jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 100) { 
            $(".header").addClass("navbar-fixed-top");  
        }
        else{
           $(".header").removeClass("navbar-fixed-top");
        }
    });
});


    jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 200) { 
            $(".gototop").addClass("appare");  
        }
        else{
           $(".gototop").removeClass("appare");
        }
    });
});
0
coder 8 août 2016 à 13:02

6 réponses

Meilleure réponse

Vous pouvez utiliser des sélecteurs séparés ensemble en les séparant avec comma. Dans le gestionnaire d'événements, utilisez this pour accéder à l'élément pour lequel l'événement a été déclenché.

$("#get,#features,#portfolio,#client,#work,#contact").click(function() {
  $('html, body').animate({
    scrollTop: $("#" + $(this).attr("id") + "to").offset().top
  }, 2000);
});
div {
  margin-top: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="get">Get</button>
<button id="features">Features</button>
<button id="portfolio">Portfolio</button>
<button id="client">Client</button>
<button id="work">Work</button>
<button id="contact">Contact</button>


<div id="getto">Get</div>
<div id="featuresto">Features</div>
<div id="portfolioto">Portfolio</div>
<div id="clientto">Client</div>
<div id="workto">Work</div>
<div id="contactto">Contact</div>
-2
Ozan 8 août 2016 à 10:12

Votre code commenté était très proche de ce que je considère comme une réponse succincte et simple. Je n'aime pas le "codage en dur" des identifiants dans JS car ils sont susceptibles de changer.

Je l'ai légèrement modifié ci-dessous (les div sont pour l'espacement uniquement):

$('[href^="#"]') .click(function(e){
  var hash = this.hash.substr(1);
  e.preventDefault();
  $('html,body').animate({
    scrollTop: $('[name=' + hash + 'to]').offset().top
  },(3000));
});
div {
  height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#get">Get</a>

<div class="spacer"></div>

<a name="getto">Get to</a>

<div class="spacer"></div>
  • Il utilise this.hash pour obtenir la valeur de hachage de l'ancre href.
  • La valeur de hachage de l'ancre peut être dynamique (en évitant la chaîne d'ID dans d'autres réponses)
0
evolutionxbox 8 août 2016 à 11:20

Séparez les identifiants à l'aide d'une virgule. Par exemple $("#id1, #id2, #id3").click();

Voici le code simplifié:

//$(function(){
//
//    $('a[href^="#"') .click(function(e){
//        var target = $(this).attr('href');
//        var strip = target.slice(1);
//        var anchor = $ ("a[name='" + strip +"']");
//        e.preventDefault();
//        $('html,body').animate({
//            scrollTop: anchor.offset().top
//        },(3000));
//    });
//});

$("#get, #features, #portfolio, #client, #work, #contact").click(function() {
  var id = "#" + $(this).attr('id') + "to";
  $('html, body').animate({
    scrollTop: $(id).offset().top
  }, 2000);
});


jQuery(document).ready(function($) {
  $(window).scroll(function() {
    if ($(window).scrollTop() >= 100) {
      $(".header").addClass("navbar-fixed-top");
    } else {
      $(".header").removeClass("navbar-fixed-top");
    }

    if ($(window).scrollTop() >= 200) {
      $(".gototop").addClass("appare");
    } else {
      $(".gototop").removeClass("appare");
    }
  });
});
0
Pugazh 8 août 2016 à 10:10

Vous pouvez combiner le sélecteur et utiliser id pour obtenir l'élément scrollTo.

$("#get, #features, #portfolio, #client, #work, #contact").click(function() {
    $('html, body').animate({
        scrollTop: $("#" + $(this).attr("id") + "to").offset().top
    }, 2000);
});
3
eisbehr 8 août 2016 à 10:03

Si vous avez souvent besoin de cette fonctionnalité, vous pouvez introduire une classe comme .scroll-on-click qui activera le comportement de défilement sur clic et utilisera l'attribut de données HTML pour stocker sa cible de défilement.
Ou vous pouvez le rendre encore plus simple - utilisez simplement cet attribut pour attacher un gestionnaire:

$(document).on("click", "[data-scroll-target]", function(e) {
    var target = $(this).attr("data-scroll-target");
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);       
});

Ensuite, dans votre HTML, utilisez simplement cet attribut:

<a href="#" data-scroll-target="#contactto">Go to Contact-to</a>
<a href="#" data-scroll-target="#workto">Go to Work-to</a>
etc.

Comme @eisbehr l'a mentionné dans le commentaire, utilisez la délégation d'événement (dans l'exemple ci-dessus) si vous souhaitez également activer ce comportement pour les éléments générés dynamiquement. Sinon, vous pouvez simplement le joindre directement afin d'améliorer légèrement ses performances:

$("[data-scroll-target]").click(function(e) { ...
3
Community 23 mai 2017 à 12:08

Passez simplement tous les identifiants dans une seule fonction

/$(function(){
//    
//    $('a[href^="#"') .click(function(e){
//        var target = $(this).attr('href');
//        var strip = target.slice(1);
//        var anchor = $ ("a[name='" + strip +"']");
//        e.preventDefault();
//        $('html,body').animate({
//            scrollTop: anchor.offset().top
//        },(3000));
//    });
//});


$("#get, #features, #portfolio, #client, #work, #contact").click(function() {
  $('html, body').animate({
     scrollTop: $("#" + $(this).attr("id") + "to").offset().top
  }, 2000);
});



jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 100) { 
            $(".header").addClass("navbar-fixed-top");  
        }
        else{
           $(".header").removeClass("navbar-fixed-top");
        }
    });
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 200) { 
            $(".gototop").addClass("appare");  
        }
        else{
           $(".gototop").removeClass("appare");
        }
    });
});

Modifier : pas besoin d'utiliser la fonction 2 .ready() car vous pouvez écrire la fonction de défilement en une comme ci-dessus.

1
Gaurav Aggarwal 8 août 2016 à 10:15