1

ループ内で発生する次のスクリプトがあります。クラスをハードコーディングせずに、ページの下部に一度だけ配置する必要があるようにするにはどうすればよいですか? スクリプトは、<li>非常に不格好に見えるそれぞれに対して発生します。

これがスクリプトです

  <script>
    $(".<?php echo strtolower(get_field('code'));?>_btn").click(function(){
        $("#<?php echo strtolower(get_field('code'));?>").on('show', function () {

            $('iframe.fohl-mobile').attr("src","http://www.psfk.com/home#<?php echo get_field('code');?>");

        });
    });
  </script>

これがループで繰り返される部分全体です

 <li>
    <a data-toggle="modal" role="button" class="<?php echo strtolower(get_field('code'));?>_btn" href="#<?php echo strtolower(get_field('code'));?>">&nbsp;</a>

    <img class="lazy" alt="<?php the_title();?>" src="<?php echo site_url('wp-content/fohl/holder.png');?>" data-original="<?php echo site_url('/wp-content/fohl/products/').strtolower(get_field('code'));?>.png" />
    <noscript><img src="<?php echo site_url('/wp-content/fohl/products/').strtolower(get_field('code'));?>.png” alt="<?php the_title();?>"/></noscript>

    <div class="title"><?php the_title();?>

    <div id="<?php echo strtolower(get_field('code'));?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <iframe class="fohl-mobile" height="500" width="330" frameborder="0"  src=""></iframe>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>
    <script>
        $(".<?php echo strtolower(get_field('code'));?>_btn").click(function(){
            $("#<?php echo strtolower(get_field('code'));?>").on('show', function () {

                $('iframe.fohl-mobile').attr("src","<?php echo site_url('/home#'.get_field('code'));?>");

            });
        });
    </script>
 </li>
4

2 に答える 2

0

とった。私はliにIDを追加し、そこから行きました...みんなの助けに感謝します。

 <ul class="products">  
        <?php foreach($products as $post) : setup_postdata($post);?>  
        <li>
            <a data-toggle="modal" role="button" class="this_btn" href="#<?php echo get_field('code');?>">&nbsp;</a>

            <img class="lazy" alt="<?php the_title();?>" src="<?php echo site_url('/wp-content/fohl/holder.png');?>" data-original="<?php echo site_url('/wp-content/fohl/products/').strtolower(get_field('code'));?>.png" />
            <noscript><img src="<?php echo site_url('/wp-content/fohl/products/').strtolower(get_field('code'));?>.png" alt="<?php the_title();?>"/></noscript>

            <p class="title"><?php the_title();?></p>

            <div id="<?php echo get_field('code');?>" class="modal hide fade" class="goat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <iframe class="fohl-mobile" height="500" width="330" frameborder="0"  src=""></iframe>
              <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
              </div>
            </div>
        </li>
    <?php endforeach;?>
    <script>
        $(".this_btn").click(function(){
            var id = $(this).parent().find('div').attr('id');

            $('.modal').on('show', function() {     
                $('.modal iframe.fohl-mobile').attr("src","http://www.website.com/home#"+id);
            });
        });
    </script>
 </ul>
于 2013-07-18T15:00:59.383 に答える