JS/jQuery - Comment puis-je un numéro d'un ID d'élément et l'utiliser comme une variable dans les fonctions?

Question

Fondamentalement, je veux qu'une fonction agisse sur plusieurs éléments individuellement en fonction de ce qui est cliqué.

J'ai 3 de ces fonctions qui font la même chose:

$("#morelink1, #pic1").click(function() { 
var imgHeight = $(".pic").height(); 
var image = $('#more1').parent('.content').siblings(
    '.image'); 
if ($('#more1').is(":visible")) { 
    $("#more1").slideUp(200, "linear"); 
    image.height(contHeight); 
    showtext1(); 
    $("#closemore1").hide(); 
} else { 
    $("#more1").slideDown(200, "linear"); 
    image.height(imgHeight); 
    hidebutton1(); 
    hidetext1(); 
} 
}); 

Comme vous pouvez le voir, les noms des ID avec lesquels je travaille dans cette fonction tout en fin « 1. » J'ai dupliqué cette fonction pour 2 et 3.

Au lieu de dupliquer, il doit y avoir un moyen d'extraire le numéro de #morelink1, d'en faire une variable et d'ajouter le numéro à l'ID dans la fonction.

Je voudrais avoir quelque chose comme:

var NUMBER = [get the number from the ID of the element that was clicked]; 

$("#morelink + NUMBER, #pic + NUMBER").click(function() { 

J'ai aussi des fonctions intégrées dans cette fonction - showtext1(), hidebutton1() et hidetext1(). Ceux-ci sont également dupliqués avec juste le nombre changé. J'aimerais pouvoir faire la même chose avec ceux qui sont dans cette fonction. Serait-ce quelque chose comme showtext(NUMBER)?

J'ai regardé autour de moi et n'arrive pas à trouver un moyen de le faire.

Existe-t-il d'autres façons de faire cela, comme passer un nombre à la fonction?

Answer 1

Au lieu de cela, il suffit de modifier votre sélection à utiliser the "starts with" operator au lieu de spécifier le id complètement:

$("[id^='morelink'], [id^='pic']").click(function() { 

Cela correspondrait à tous les éléments où la valeur id commence par 'morelink' ou 'pic', peu importe ce que le reste de la id est.

Si vous avez toujours besoin de cette valeur dans le gestionnaire de clic, vous pouvez l'analyser à partir du id de l'élément en cours.

var idString = $(this).attr('id'); 
// use whatever logic you define to parse the number value. 
// for example, maybe a regular expression which matches only numeric characters? 

Answer 2

Si vous pouviez partager tout votre code, cela aiderait. De ma compréhension, il devrait être quelque chose le long de ces lignes:

// Append click event to elements whose id starts with morelink or pic. 
$('[id^="morelink"], id^=["pic"]').click(function() { 
    // Get id of current clicked element. 
    var id = $(this).attr('id'); 
    // Use RegExp to extract number. 
    var number = id.match(/[\d]+/)[0]; 

    // Your functions starting. 
    var imgHeight = $(".pic").height(); //should this be pic + NUMBER? 
    var image = $('#more' + number).parent('.content').siblings('.image'); 

    if ($('#more' + number).is(":visible")) { 
    $('#more' + number).slideUp(200, "linear"); 
    image.height(contHeight); 
    // Executes selectMore1(); if number = 1 
    window['showtext' + number](); 
    $("#closemore" + number).hide(); 
    } else { 
    $("#more" + number).slideDown(200, "linear"); 
    image.height(imgHeight); 
    // Executes hidebutton1(); if number = 1 
    window['hidebutton' + number](); 
    // Executes hidetext1(); if number = 1 
    window['hidetext' + number](); 
    } 
}); 

Cependant, je ne pense pas hidebutton1() devrait exister, mais hidebutton (nombre). C'est pourquoi j'ai demandé que tout le code comprenne vraiment ce que vous vouliez dire en créant plusieurs fonctions pour le moment.

Answer 3

Si vous connaissez le préfixe pour les noms de variables, suffisez avec le (s) numéro (s) souhaité (s). Puis branchez dans le sélecteur jQuery. Je l'ai fait avant, si le branchement direct comme $(YourNewVariableForID) ne fonctionne pas, alors essayez $("#" + eval(YourNewVariableForID)).