Dev Faq
1
votes

Copiez href de dans un DIV avec un identifiant unique et collez-le ailleurs dans ce DIV

J'essaie de trouver un moyen de copier le href du div data-name = "entity_field_post_title" et de l'utiliser comme href de data-type = "image" div

Le but derrière ceci est d'ouvrir le lien correspondant de la page au lieu d'ouvrir ses photos. Ce sont des miniatures de messages, et je voudrais ouvrir le message eux-mêmes, pas les photos.

Il est important de souligner que le numéro ID de la division supérieure change à chaque fois de manière imprévisible. 

<div id="drts-content-post-1163">
    <div class="drts-display-element-columns-3">
        <div class="drts-row drts-gutter-none">
            <div class="slick-list draggable">
                <div class="slick-track">
                    <div data-type="image" class="slick-slide">
                        <a href="http://localhost/wp/wp-content/uploads/horse.jpeg" ><figure><img src="http://localhost/wp/wp-content/uploads/horse.jpeg"></figure></a>
                    </div>
                    <div data-type="image" class="slick-slide">
                        <a href="http://localhost/wp/wp-content/uploads/panda.png" ><figure><img src="http://localhost/wp/wp-content/uploads/panda.png"></figure></a>
                    </div>
                </div>          
            </div>
        </div>
        <div data-name="column" class="drts-display-element-column-6">
            <div class="drts-row drts-gutter-none">
                <div data-name="entity_field_post_title" class="directory-listing-title ">
                    <a href="http://localhost/wp/anuncios/prueba-desde-backend-1/" target="_self" class="drts-entity-1163">TEXT</a>
                </div>
            </div>
        </div>
    </div>
</div>

0 commentaires

3 Réponses :

0
votes

Je ne suis pas sûr de comprendre, mais si vous voulez simplement faire de l'image un lien, vous pouvez utiliser une balise d'ancrage avec une image d'arrière-plan comme celle-ci: 

<a class="photo" href="website.net/link" title="photo" id="photo">photo</a>

3 commentaires

Pas de @Gandalfion. Laissez-moi essayer de m'expliquer à nouveau. Je dois remplacer les hrefs actuels de class = "div1" pour "# 1163 .div1 a href = # 1163 .div-good-one a href" et "# 734 .div1 a href = # 734 .div-good -one a href "et répétez cela pour tous les autres #id de la page (il y en a beaucoup).

Vous voulez que le href des balises imgage a soit le même que le href du .div-good-one , pour chaque conteneur div?

exactement! (pour chaque conteneur avec un identifiant différent)

2
votes

J'ai laissé les sélecteurs en tant que variables juste au cas où vous auriez besoin d'apporter des modifications mineures à celles-ci, mais la base fonctionne - Boucle sur chaque containerDiv , obtenant le href de linkDiv> , et en appliquant ce lien à chaque imageDiv> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drts-content-post-1163">
    <div class="drts-display-element-columns-3">
        <div class="drts-row drts-gutter-none">
            <div class="slick-list draggable">
                <div class="slick-track">
                    <div data-type="image" class="slick-slide">
                        <a href="http://localhost/wp/wp-content/uploads/horse.jpeg" ><figure><img src="http://localhost/wp/wp-content/uploads/horse.jpeg"></figure></a>
                    </div>
                    <div data-type="image" class="slick-slide">
                        <a href="http://localhost/wp/wp-content/uploads/panda.png" ><figure><img src="http://localhost/wp/wp-content/uploads/panda.png"></figure></a>
                    </div>
                </div>          
            </div>
        </div>
        <div data-name="column" class="drts-display-element-column-6">
            <div class="drts-row drts-gutter-none">
                <div data-name="entity_field_post_title" class="directory-listing-title ">
                    <a href="http://localhost/wp/anuncios/prueba-desde-backend-1/" target="_self" class="drts-entity-1163">TEXT</a>
                </div>
            </div>
        </div>
    </div>
</div>
let containerDiv = 'div[id*="drts-content-post-"]';
let linkDiv = 'div[data-name="entity_field_post_title"]';
let imageDiv = 'div[data-type="image"]';

let $container = $(containerDiv).has(linkDiv);

$container.each((index, element) => {
  let link = $(element).find(`${linkDiv} > a`).attr('href');
  $(element).find(`${imageDiv} > a`).attr('href', link);
})

19 commentaires

Le code d'avant était une version simplifiée de mon code. En réalité, il y a d'autres conteneurs entre lesquels let $ container = $ ('div'). Has ('. Div-good-one'); pointe vers. Je crois que j'ai besoin d'une condition AND pour pouvoir cibler le conteneur avec les deux types de DIV à l'intérieur. Comment dois-je faire ça?

Cela dépend de la structure de votre code - la méthode .has () peut cependant être chaînée, vous pouvez donc ajouter des vérifications supplémentaires pour les classes / ID si vous le pouvez. Sinon, il serait utile de publier le code supplémentaire afin que nous puissions voir plus facilement ce qui peut être fait

Oui, je pourrais l'enchaîner, je peux trouver les classes ou les identifiants pour le faire. Dois-je l'enchaîner comme ça? let $ container = $ ('div'). has ('. another-div'). has ('. div-good-one');

J'essaye toujours de l'ajouter. Je travaille dans un Wordpress et j'ai quelques difficultés à ajouter la fonction au fichier functions.php qui appelle le fichier js! : /

Messages d'erreur? Vous voyez des changements dans le HTML?

Aucun message d'erreur, aucun changement dans le HTML. J'ai ajouté une alerte et JS est importé avec succès dans wordpress. Je suis en train de changer votre code en essayant différentes choses, mais aucun résultat pour le moment. Peut-être que certains "ou" ne sont pas écrits comme il se doit?

Je ne sais pas, l'extrait que j'ai publié semble fonctionner comme prévu, donc je suppose que les problèmes sont liés aux ajustements du code complet; Je ne peux pas faire grand-chose de plus pour aider sans voir ce code

J'ai édité mon message d'origine avec la version simplifiée de mon code (CSS supprimé et DIV vides). Peut-être que ça aide! :RÉ

Acclamations; Je modifierai mon message dans un instant après avoir jeté un coup d'œil

Ce que vous avez écrit a du sens, j'ai vérifié les conditions et elles me semblent toutes correctes, mais cela ne change toujours pas le href et ne change en rien le HTML. Tout fonctionne bien cependant. Se pourrait-il que l'image pousse à nouveau le href vers son a après le chargement du code JS?

Cela pourrait valoir la peine d'obtenir des journaux de console dans mon code - console.log ($ (element) .find ( $ {imageDiv}> a ) .attr ('href')) comme dernière ligne de chacun, assurez-vous qu'il est exécuté

script_substitute_a_photos.js? ver = 1.0.0: 8 Uncaught TypeError: $ n'est pas une fonction de script_substitute_a_photos.js? ver = 1.0.0: 8 (anonyme) @ script_substitute_a_photos.js? ver = 1.0.0: 8

On dirait que vous n'avez pas installé jQuery

Étrange, j'ai dans l'en-tête

Je ne sais pas comment WordPress gère les importations, mais vous pouvez essayer