从变量中删除空格以创建有效的html元素ID？

我在Wordpress上添加fancybox到产品库。我使用产品标题作为隐藏div和缩略图链接的href的id名称。产品标题中有空格，打破了花哨的风格。从变量中删除空格以创建有效的html元素ID？

我在网上找到的解决方案只能引用html元素之间的空格，而我的javascript /正则表达式知识还不足以从那里得出解决方案。

这里是我用来生成产品缩略图和图像的代码：

<div class="entry-post-thumbnail"> 
      <a class="size-<?php echo $image_size;?> fancybox" href="#image-<?php the_title(); ?>"><?php the_post_thumbnail($image_size); ?></a> 
      <div id="image-<?php the_title(); ?>" style="display: none;"> 
       <?php the_post_thumbnail($post->ID,'full'); ?> 
      </div> 
</div><!-- .entry-post-thumbnail -->

这里是outputed代码：

<a class="size-product fancybox" href="#image-Product three"> 
    <img src="[###]/wp-content/uploads/2013/06/product-thumbnail.png" class="attachment-product wp-post-image" alt="Product thumbnail" height="222" width="166"></a> 
<div id="image-Product three" style="display: none;"> 
    <img src="[###]/wp-content/uploads/2013/06/product-thumbnail.png" class="attachment- wp-post-image" alt="Product thumbnail" full="" height="222" width="166">    
    </div>

任何帮助将非常感激！

来源

2013-06-26 Bojana Šekeljić

一种解决方案是：$（ '大小产物。'）每个（函数（）{ \t变种ID = $（本）.attr（）; \t ID = id.split（”。 “）.join（”“）; \t $（this）.attr（'id'，id）; }）; –

您的问题标题提到了javascript，但您的examlpe中没有任何内容，并且修复php部分的id似乎是合乎逻辑的。你能明确你需要修复的地方吗？ –

@DanielGimenez <？php the_title（）; ？>产生的标题是用空格输出的，因为输入的标题通常有它们。我需要一种方法在标题生成后删除空格。谢谢 –

使用preg_replace

<div id="image-<?php preg_replace('/(\s/', '', the_title()); ?>" style="display: none;">

一个更好的正则表达式是[^A-Za-z0-9\-_:.]。这与根据What are valid values for the id attribute in HTML?的html ID匹配所有无效字符。在与jquery的javascript

来源

2013-06-26 02:15:46

从变量中删除空格以创建有效的html元素ID？

回答

相关问题