Dev Faq
7
votes

Obtenez un ID DIV de soeur généré par PHP

J'ai du code HTML pour une page de blog. Ci-dessous - Code de 1 message et ses coupes de hauteur par CSS. Ce seront de nombreux postes sur la page de blog. Je veux voir tout le contenu de la page en particulier en cliquant sur "Lire la suite". DIV with blog content a une pièce d'identité dynamique qui gagne de base de données par php.

Comment puis-je modifier la hauteur de div avec la classe "blog_article" en cliquant sur "Lire la suite"?

J'ai pensé à utiliser JS / JQuery mais ne peut pas obtenir l'identifiant de "blog_article" div. Ou peut-être qu'il y a un meilleur moyen de faire cela? xxx

1 commentaires

Merci d'aide, les gars.

4 Réponses :

3
votes

mais ne peut pas obtenir un identifiant de "blog_article" div

Pourquoi ne pouvez-vous pas ?: xxx

ou, s'il s'agit d'une chaîne: xxx

alors blogeadmore () a une référence au ID : xxx

inversement, puisque vous avez marqué jQuery, vous pouvez traverser le DOM de Le bouton Cliquez pour déterminer l'élément sans avoir besoin d'un ID du tout. Quelque chose comme ceci: xxx

0 commentaires
1
votes

Vous avez l'identifiant juste là, vous pouvez le générer juste bien avec blogeadmore ('') . Mais vous ne avez pas besoin l'identifiant, votre bouton habite à l'intérieur de la chose dont vous avez besoin de développer afin que vous puissiez le regarder aussi.

Vous utilisez des techniques de manutention d'événement JS assez anciennes, ce qui ne sera donc pas aussi propre que le code moderne devrait être (qui n'utilise pas onclick et d'autres choses, mais ajoute l'écoute de l'événement après Le DOM a été mis en place), mais vous pouvez simplement passer onclick = "blogeadmore (this)" de sorte que votre fonction blogeadmore connaît l'élément qui l'a déclenché. Ensuite, vous venez de passer à travers la séquence de element.parentnode jusqu'à ce que vous trouviez l'élément avec element.classlist.contains ('blog_article') === vrai (les deux ont appels jQuery équivalents)

sorte d'une réponse, mais le vrai serait "Ce n'est pas un très bon moyen de générer votre code. Générez le code HTML, puis joindre la gestion des événements JS après".

0 commentaires
1
votes

Utilisez une classe pour En savoir plus code>, dites read_more code> similaire lire plus code> code>. Et utiliser suivant JQuery. 

$('.read_more').click(function(){
    var blog_article = $(this).closest('.blog_article_wrapper').find('.blog_article');

    blog_article.height(100); //change height here
});

0 commentaires
3
votes

Il y a une manière plus simple que la réponse d'Azim, mais basée sur les mêmes idées:

J'utiliserais toujours la classe lis_more code>, bien que cela ne soit pas réellement nécessaire. Je supposerai une telle classe appliquée au bouton. P> xxx pré>

Dans ce cas, j'utilise .parent () code> méthode afin d'obtenir l'objet parent à partir de l'élément cliqué, plutôt que de compter sur .cosest () code>. Deux appels vers .parent () code> sont nécessaires car le code> réside dans un

code> et nous avons besoin du parent de qui div em> avant que nous puissions explorer. p>

Alternativement: p> 

$('.read_more').click(function(){
    var blog_article = $(this).parent().prev();
    blog_article.css('height', '100px'); //change height here
});

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO