时间戳

首页 > 解决方案 > 使用 echo 定位 PHP 生成的 HTML ID

php - 使用 echo 定位 PHP 生成的 HTML ID

问题描述

我的PHP：

    <div id="seam-builder-wrap" class="container">
        <?php
            $masterCat = 39; // Master category 'Seam Builder' ID is 39)
            $taxonomyName = "product_cat";
            $termchildren = get_term_children($masterCat, $taxonomyName);
            
            foreach ($termchildren as $child) {
                $subCat = get_term_by('id', $child, $taxonomyName); //assigns $subCat to the current subcategory in the loop
                $subCat_title = $subCat->name; //gets the name of the subcategory
                $cat_id = $subCat->term_id; //gets the ID of the subcategory on its own
                $thumbnail_id = get_term_meta($child, 'thumbnail_id', true); //gets the thumbnail of the subcategory
                $image = wp_get_attachment_url($thumbnail_id); //gets the URL of the thumbnail
        ?>

        <a id="<?php echo $cat_id ?>" class="seamBuilder_trigger">
            <img src="<?php echo $image ?>" />
            <span><?php echo $subCat_title ?></span>
        </a>
            <?php } //ends for foreach loop above ?>
    </div>

请参阅我在下面的 CSS 块中所做的评论，看看哪些有效，哪些无效。希望我没有遗漏一些非常明显的东西，但是我已经经历过很多次了，甚至我在网上找到的结果似乎都与为超过 1 个元素生成 HTML ID 有关，这会导致它打破。

上面 PHP 的 HTML 输出：

#seam-builder-wrap {
  //This CSS statement DOES work.
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

#seam-builder-wrap div {
  //This CSS statement DOES work.
  max-width: 50%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 20%;
}

#40 {
  order: 1;
} //removed #seam-builder-wrap just for testing - still didn't work
#seam-builder-wrap #41 {
  order: 2;
} //NONE of these CSS statements work from here below
#seam-builder-wrap #42 {
  order: 3;
}

#seam-builder-wrap #43 {
  order: 4;
}

#seam-builder-wrap #44 {
  order: 5;
}

#seam-builder-wrap #45 {
  order: 6;
}

#seam-builder-wrap #46 {
  order: 9;
}

#seam-builder-wrap #47 {
  order: 7;
}

#seam-builder-wrap #48 {
  order: 8;
}

#seam-builder-wrap #49 {
  order: 10;
}

#seam-builder-wrap #50 {
  order: 11;
}

#seam-builder-wrap #51 {
  order: 13;
}

#seam-builder-wrap #52 {
  order: 14;
}

#seam-builder-wrap #53 {
  order: 15;
}

#seam-builder-wrap #54 {
  order: 16;
}

#seam-builder-wrap #55 {
  order: 17;
}

#seam-builder-wrap #56 {
  order: 18;
}

#seam-builder-wrap #57 {
  order: 19;
}

#seam-builder-wrap #58 {
  order: 20;
}

#seam-builder-wrap #59 {
  order: 22;
}

#seam-builder-wrap #60 {
  order: 23;
}

#seam-builder-wrap #61 {
  order: 21;
}

#seam-builder-wrap #62 {
  order: 24;
}

#seam-builder-wrap #63 {
  order: 25;
}

#seam-builder-wrap #64 {
  order: 29;
}

#seam-builder-wrap #65 {
  order: 26;
}

#seam-builder-wrap #66 {
  order: 27;
}

#seam-builder-wrap #67 {
  order: 28;
}

#seam-builder-wrap #68 {
  order: 30;
}

#seam-builder-wrap #69 {
  order: 31;
}

#seam-builder-wrap #70 {
  order: 34;
}

#seam-builder-wrap #71 {
  order: 32;
}

#seam-builder-wrap #72 {
  order: 33;
}

#seam-builder-wrap #73 {
  order: 12;
}

```
<section id="content" class="site-content">
  <div id="seam-builder-wrap" class="container">

    <a id="40" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-inch-instaloc.jpg">
      <span>1" Instaloc Seam</span>
    </a>

    <a id="41" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-inch-snap-on.jpg">
      <span>1" Snap-On Seam</span>
    </a>

    <a id="42" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-inch-double-fold.jpg">
      <span>1" Double Fold Seam</span>
    </a>

    <a id="43" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-inch-nail-strip.jpg">
      <span>1" Nail Strip Seam</span>
    </a>

    <a id="44" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-inch-single-fold.jpg">
      <span>1" Single Fold Seam</span>
    </a>

    <a id="45" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-inch-snap.jpg">
      <span>1" Snap Seam</span>
    </a>

    <a id="46" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-375-inch-t-seam.jpg">
      <span>1 3⁄8" T-Seam</span>
    </a>

    <a id="47" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-5-inch-dutch.jpg">
      <span>1 1⁄2" Dutch Seam</span>
    </a>

    <a id="48" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-5-inch-batten-cap-t-seam.jpg">
      <span>1 1⁄2" Batten Cap T-Seam</span>
    </a>

    <a id="49" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-5-inch-double-fold.jpg">
      <span>1 1⁄2" Double Fold Seam</span>
    </a>

    <a id="50" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-5-inch-single-fold.jpg">
      <span>1 1⁄2" Single Fold Seam</span>
    </a>

    <a id="51" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-5-inch-snap-on.jpg">
      <span>1 1⁄2" Snap-On Seam</span>
    </a>

    <a id="52" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-5-inch-nail-strip.jpg">
      <span>1 1⁄2" Nail Strip Seam</span>
    </a>

    <a id="53" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-5-inch-cee-lock.jpg">
      <span>1 1⁄2" Cee-Lock Seam</span>
    </a>

    <a id="54" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-625-inch-snap.jpg">
      <span>1 5⁄8" Snap Seam</span>
    </a>

    <a id="55" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-75-inch-ultra-lock.jpg">
      <span>1 3⁄4" Ultra Lock Seam</span>
    </a>

    <a id="56" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-75-inch-inter-lock.jpg">
      <span>1 3⁄4" Interlock Seam</span>
    </a>

    <a id="57" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-75-inch-snap.jpg">
      <span>1 3⁄4" Snap Lock</span>
    </a>

    <a id="58" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-75-inch-mirage-ii.jpg">
      <span>1 3⁄4" Mirage II Seam</span>
    </a>

    <a id="59" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-inch-bulb.jpg">
      <span>2" Bulb Seam Cap</span>
    </a>

    <a id="60" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-inch-double-fold.jpg">
      <span>2" Double Fold Seam</span>
    </a>

    <a id="61" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-inch-single.jpg">
      <span>2" Single Fold Seam</span>
    </a>

    <a id="62" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-inch-T-seam.jpg">
      <span>2" T-Seam</span>
    </a>

    <a id="63" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-125-inch-trap-single-fold.jpg">
      <span>2 1⁄8" Trap Single Fold Seam</span>
    </a>

    <a id="64" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-5-inch-batten-cap-t-seam.jpg">
      <span>2 1⁄2" Batten Cap T-Seam</span>
    </a>

    <a id="65" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-375-inch-single-fold.jpg">
      <span>2 3⁄8" Single Fold Seam</span>
    </a>

    <a id="66" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-375-inch-t-seam.jpg">
      <span>2 3⁄8" T-Seam</span>
    </a>

    <a id="67" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-5-inch-single-fold.jpg">
      <span>2 1⁄2" Single Fold Seam</span>
    </a>

    <a id="68" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-5-inch-double-fold.jpg">
      <span>2 1⁄2" Double Fold Seam</span>
    </a>

    <a id="69" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/2-5-inch-bulb.jpg">
      <span>2 1⁄2" Bulb Seam</span>
    </a>

    <a id="70" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/3-inch-trap-snap.jpg">
      <span>3" Trap Snap Seam</span>
    </a>

    <a id="71" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/3-inch-trap-double-fold.jpg">
      <span>3" Trap Double Fold Seam</span>
    </a>

    <a id="72" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/3-inch-trap-single-fold.jpg">
      <span>3" Trap Single Fold Seam</span>
    </a>

    <a id="73" class="seamBuilder_trigger">
      <img src="/wp-content/uploads/2020/12/1-5-inch-snap.jpg">
      <span>1 1⁄2" Snap Seam</span>
    </a>
  </div>

  <div class="posts-area container"></div>

</section>

谢谢大家的意见。当我在我的唯一 ID 前加上前缀而不是以数字开头时，这个问题就解决了。

标签： phphtmlcss

解决方案

答：HTML ID 不能以数字开头，需要前缀。

推荐阅读