Cum să obții ID-ul unei postări din buton și să transmiți titlul către Modal

Question

Cum să obții ID-ul unei postări din buton și să transmiți titlul către Modal

3 aug. 2018, 16:08:50

Vizualizări: 20K

Voturi: 0

    <div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
      <span class="name"><?php echo $title ?></span><span class="jobtitle"><?php echo $jobtitle ?></span>
      <a onclick="return moreinfoModal(this);" id="<?php get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal" href="javascript:void(0);" class="info">mai multe informații</a>
    </div>


    <div id="moreinfo-modal" role="dialog">
          <div class="teammember_div">
            <a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg" alt="Închide fereastra" title="Buton închidere"></a>
            <?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
            <p><?php echo $title ?></p>
            <p><?php echo $about ?></p>
            <span class="jobtitle"><?php echo $jobtitle ?></span>

            <span id="moreinfo" style="display: inherit;"></span>
            <a id="modal-join" class="btn-cta" href="/sign-up/">Devino Membru!</a>
          </div>
        </div>

    <?php }?>
    </div>
    </div>

Afișez 4 carduri cu nume și titluri de job și un buton pentru deschiderea unei ferestre modale. Când utilizatorul face click pe buton, se deschide o fereastră modală cu o imagine, titlu, descriere etc...

Din păcate, pot deschide doar o fereastră modală cu detaliile unei singure postări. Aș dori să potrivesc conținutul ferestrei modale cu conținutul cardurilor, dacă are sens.

Deci card = Harry Modal = Harry

<script> function moreinfoModal(field) {
        console.log(field.id);
        $('#moreinfo-modal').toggleClass('open');
    }


    function closeMoreInfoModal() {
        $('#moreinfo-modal').toggleClass('open');
    }

    $(document).on('click', '.close-pill', function(e) {
        $(this).parent().remove();
        e.preventDefault();
    });
    </script>

Aveți vreo idee ce îmi lipsește?

Remco

125

php buclă

Comentarii

Se pare că nu ai o parte care să insereze date în fereastra modală în partea de js

idpokute

3 aug. 2018 16:34:47

da și aici sunt puțin în impas. Aș aprecia un pic de îndrumare. Cum aș putea proceda pentru a face asta?

Remco

3 aug. 2018 16:47:55

Toate răspunsurile la întrebare

Comentarii

Salut, mulțumesc pentru cod - în starea actuală nu funcționează, dar m-a îndreptat în direcția corectă așa că voi continua să lucrez la el. Mulțumesc!

Remco

6 aug. 2018 14:12:57

deci în timp ce afișează ferestrele modale, le listează pe toate dintr-o singură apăsare - adică listează toate ID-urile de postări și nu doar unul. Aveți vreo sugestie?

Remco

6 aug. 2018 23:56:21

Îmi pare rău, nu înțeleg care este problema reală cu care v-ați confruntat în cod și de ce toate ferestrele modale sunt listate la o singură apăsare. Puteți să împărtășiți codul complet al paginii ca să înțeleg unde greșiți? Mulțumesc!

Nilesh Sanura

7 aug. 2018 09:22:58

Nicio problemă, am rezolvat astfel încât să apeleze doar un singur modal - mulțumesc!

Remco

7 aug. 2018 16:55:15

Este minunat... :)

Nilesh Sanura

7 aug. 2018 17:09:10

Nilesh Sanura 49 · Accepted Answer · 2018-08-04T15:14:24Z

Când afișăm datele postării într-un model la click pe buton, trebuie să furnizăm ID-ul postării cu atributul de date pentru ținta specifică a modelului.

Vă rugăm să adăugați ID-ul postării în data-target în tag-ul anchor, precum și în ID-ul tag-ului div principal.

Am modificat codul dumneavoastră aici:

<div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
  <span class="name"><?php echo $title; ?></span><span class="jobtitle"><?php echo $jobtitle; ?></span>
  <a onclick="return moreinfoModal(this);" id="<?php echo get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal-<?php echo get_the_ID();?>" href="javascript:void(0);" class="info">mai multe informații</a>
</div>


<div id="moreinfo-modal-<?php echo get_the_ID();?>" class= "moreinfo-modal" role="dialog">
      <div class="teammember_div">
        <a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg" alt="Închide fereastra modală" title="Închide"></a>
        <?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
        <p><?php echo $title ?></p>
        <p><?php echo $about ?></p>
        <span class="jobtitle"><?php echo $jobtitle ?></span>

        <span id="moreinfo" style="display: inherit;"></span>
        <a id="modal-join" class="btn-cta" href="/sign-up/">Devino Membru!</a>
      </div>
    </div>

<?php }?>
</div>
</div>

De asemenea, puteți modifica codul JavaScript pentru a face click pe clasă în loc de atributul ID al div-ului, astfel:

<script> function moreinfoModal(field) {
        console.log(field.id);
        $('.moreinfo-modal').toggleClass('open');
    }


    function closeMoreInfoModal() {
        $('.moreinfo-modal').toggleClass('open');
    }

    $(document).on('click', '.close-pill', function(e) {
        $(this).parent().remove();
        e.preventDefault();
    });
    </script>

Sper că acest lucru vă poate rezolva problema. :)