Question

我在这里给出了一些答案的代码，但我在jQuery中是一个真正的菜鸟，所以我将不胜感激。

我想创建一个Lightbox弹出窗口，但网站是在Wordpress上，所以我需要动态地将id添加到HTML标记。

我能够为ID添加数字以区分它们，但我在变量btnPhotos和galleryItems中实现这些动态ID时遇到了困难。任何想法如何做到这一点？

// Gallery lightbox

jQuery(document).ready(function () {

  // Add numbers to ids
  var n = 0;
  $(".card_image img").each(function(n) {
        n++;
        $(this).attr("id", "gallery-popup-" + n);
  });

  $(".cards > div").each(function(n) {
        n++;
        $(this).attr("id", "gallery-" + n);
  });

  // use above variables to trigger lightbox
  var btnPhotos = $("#gallery-popup"),
    galleryItems = $("#gallery").find(".gallery-item a");

  $("#gallery-popup").click(function(event) {
    galleryItems.first().click();
  });

});

现在btnPhotos正在寻找#gallery-popup，但是在第一个函数中没有#gallery-popup我在每个#gallery-popup添加计数器。所以在HTML标记中它会导致

#gallery-popup-1

#gallery-popup-2等......

如何使用此＆＃34;更新＆＃34; var btnPhotos中的HTML标记，因此它会查找#gallery-popup-1，#gallery-popup-2等等？

同样的故事是galleryItems，它正在寻找#gallery，但随着计数器改变的标记是：

#gallery-1

#gallery-2等

以下是我得到的标记（请注意这些是Wordpress帖子，因此id="gallery-和id="gallery-popup-的数量正在发生变化......

 <ul class="cards"> 

   <li class="cards_item">
     <div class="card">
        <div class="card_image">
            <img id="gallery-popup-1" src="image01.png">
        </div>
        <div class="card_content">
            <h3 class="card_heading">Title here</h3>
        </div>
    </div>
  </li>
  <div id="gallery-1">
    <ul>
      <li class="gallery-item">
          <a href="image01.png" data-slb-active="1" data-slb-asset="1409106488" data-slb-internal="0" data-slb-group="779"><img src="" alt=""></a>
        </li>                                                    
    </ul>
  </div> 

  <li class="cards_item">
    <div class="card">
         <div class="card_image">
               <img id="gallery-popup-2" src="image02.png">
         </div>
        <div class="card_content">
             <h3 class="card_heading">Title here</h3>
        </div>
     </div>
  </li>           
  <div id="gallery-2">
    <ul>
      <li class="gallery-item">
         <a href="image02.png" data-slb-active="1" data-slb-asset="290324284" data-slb-internal="0" data-slb-group="776"><img src="" alt=""></a>
      </li>
    </ul>
  </div>

</ul>

我不确定是否需要它，但为了以防万一，这里也是模板文件中的代码，它负责上面的标记：

 <?php while ( have_posts() ) : the_post(); ?>          
    <li class="cards_item">
        <div class="card">
            <div class="card_image">
                 <?php                            
                      $url = wp_get_attachment_url( 
                      get_post_thumbnail_id($post->ID), 'full' ); ?>
                      <img id="gallery-popup" src="<?php echo $url ?>"/>
                      </div>
                        <div class="card_content">
                           <h3 class="card_heading"><?php 
                           the_title();?></h3>
                        </div>
                    </div>
              </li>

              <?php $images = get_field('gallery_images');
                if( $images ): ?>
                <div id="gallery">
                    <ul>
                        <?php foreach( $images as $image ): 
                            $content = '<li class="gallery-item">';
                                $content .= '<a href="'. 
                                $image['url'] .'">';
                                $content .= '<img src="'. 
                                $image['sizes']['full'] .'" alt="'. $image['alt'] .'" />';
                                $content .= '</a>';
                                $content .= '</li>';
                            if ( function_exists('slb_activate') ){
                    $content = slb_activate($content);
                    }

                echo $content;?>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <?php endif; ?>

    <?php endwhile; // End of the loop. ?>

Answer 1

您可以将动态ID存储在数组中，并将该数组用作选择器...

// Gallery lightbox

jQuery(document).ready(function () {
  // Add numbers to ids
  var n = 0;
  var photoIdList = []; // create an array to store the dynamic ids
  var itemsIdList = [];
  $(".card_image img").each(function(n) {
        n++;
        const id = "gallery-popup-" + n;
        photoIdList.push(id); // push the ids into the array
        $(this).attr("id", id);
  });

  $(".cards > div").each(function(n) {
        n++;
        const id = "gallery-" + n;
        itemsIdList.push(id);
        $(this).attr("id", id);
  });

  // use above variables to trigger lightbox
  var btnPhotos = $(photoIdList), // use the array as the selector
    galleryItems = $(itemsIdList).find(".gallery-item a");

  $(photoIdList).click(function(event) {
    galleryItems.first().click();
  });

});

但是使用attribute "id" starts with的选择器语法代替......

可能更有意义

// Gallery lightbox

jQuery(document).ready(function () {

  // Add numbers to ids
  var n = 0;
  $(".card_image img").each(function(n) {
        n++;
        $(this).attr("id", "gallery-popup-" + n);
  });

  $(".cards > div").each(function(n) {
        n++;
        $(this).attr("id", "gallery-" + n);
  });

  // use above variables to trigger lightbox
  var btnPhotos = $("[id^=gallery-popup-]"), // just modify your selector to target the dynamic ids
    galleryItems = $("[id^=gallery-]").find(".gallery-item a");

  btnPhotos.click(function(event) {
    galleryItems.first().click();
  });

});

如果你可以分享你的标记结构，你可能会得到更好的答案。

修改另外，正如@martijn正确指出的那样，你的id setter例程应该看起来更像这样：

let n = 0; $(".card_image img").each(function() { this.id = "gallery-popup-" + n++; }); // or even easier, each() has it's own counter: $(".card_image img").each(function(index) { this.id = "gallery-popup-" + index; });

修改：鉴于你的标记，我建议如下：

// Gallery lightbox jQuery(document).ready(function () { $(".card_image img").each(function(index) { this.id = "gallery-popup-" + index; }); $(".cards > div").each(function(index) { this.id = "gallery-" + index; }); // use event delegation to catch click events and trigger others. $(".cards").on("click", "[id^=gallery-popup-]", function (e) { var item = '#' + this.id.replace('-popup', ''); // `this` should refer to the gallery-popup $(item).find(".gallery-item a").first().click(); }); });

如何将一个函数的值包含在另一个函数中？

1 个答案: