将div转换为JavaScript的链接，限制编号。类和无IDS

我已经在WordPress的母公司主题的functions.php中产生的简产生下面的HTML：将div转换为JavaScript的链接，限制编号。类和无IDS

<div class="pricing-table-one left full-width "> 
    <div class="pricing-table-one-border left"> 
     <div class="pricing-table-one-top pricing-table-green left" style="background:#95705b"> 
      <span style="color:">Restaurant/Café</span> 
      <p style="color:"></p> 
     </div> 
     <div class="pricing-table-one-center pricing-table-white left"> 
      <h5>ONTBIJT</h5> 
     </div> 
     <div class="pricing-table-one-center pricing-table-white left"> 
      <h5>LUNCH</h5> 
     </div> 
     <div class="pricing-table-one-center pricing-table-white left">   
      <h5>BRUNCH</h5> 
     </div> 
     <div class="pricing-table-one-center pricing-table-white left"> 
      <h5>DINER</h5> 
     </div> 
     <div class="pricing-table-one-center pricing-table-white left"> 
      <h5>WEST-FRIESE KOFFIETAFEL</h5> 
     </div> 
     <div class="pricing-table-one-center pricing-table-white left"> 
      <h5>SALADESCHOTELS</h5> 
     </div> 
     <div class="pricing-table-one-center pricing-table-white left"> 
      <h5>EN NOG VEEL MEER</h5> 
     </div> 
     <div class="color-buttons color-button-blue pricing-button"> 
      <a href="mailto:[email protected]?subject=Informatie Restaurant">Voor meer informatie – Email ons</a> 
     </div> 
    </div> 
</div>

我需要做的标题中的一个细胞或股利含有它的链接到PDF。我读here，我可以用jQuery做这个的ID如下：

$("div").click(function(){ 
    window.location=$(this).find("a").attr("href"); return false; 
});

但是，当你更改HTML他只工作。我只喜欢Jquery或JavaScript解决方案。在CSS技巧我发现了另一个snippet，可以帮助

$(".myBox").click(function() { 
    window.location = $(this).find("a").attr("href"); 
    return false; 
});

我只需要在A到DIV元素和类更改为类的div。不过，我需要这与一些特定的div做（一些项目表内，但不是所有的），它只有一个类型的有用类：

<div class="pricing-table-one-center pricing-table-white left"><h5>BRUNCH</h5></div>

或许通过关注与父类的div“pricing-表一“，然后在里面的div。但然后我仍然需要第n个div或h5标签..

这是可能实现创建链接BRUNCH或其他h5标签与此JavaScript代码或jQuery的HTML代码或将我必须更改为PHP代码服务器端？

来源

2015-02-10 rhand

我提高了他的答案，但是，这里是我的意思的快速片段。这假设你不能控制html。

$(function() { 
    // pdf urls and header names 
    var pdfUrls = { 
    'BRUNCH': 'http://domain.nl/wp-content/uploads/2015/02/09/x.pdf', 
    'DINER': 'http://domain.nl/wp-content/uploads/2015/02/09/y.pdf' 
    }; 

    // loop through each h5 tag within pricing-table-one 
    $('.pricing-table-one h5').each(function (i, el) { 
    var header = $(el).text(); 

    // if a header url is found 
    if (pdfUrls[header]) { 
     $(el).wrap('<a href="' + pdfUrls[header] + '"></a>'); 
    } 
    }); 
});

这里有一个小提琴：http://jsfiddle.net/pbzvszxo/

来源

2015-02-10 07:55:45 jungy

太棒了！ - 我正要发布同样的东西但是我在办公室很忙碌;） - 很棒的工作...... + 1 - 我希望“@rhand”在你的答案中找到了解决方案。 – prog1011 2015-02-10 08:54:13

我用'wp_enqueue_scripts'添加了@jungy的脚本。看起来像一个很好的解决方案。现在在http://goo.gl/iKltLE处处理一个错误：'pricingurls.js？ver = 4.1：1 Uncaught TypeError：undefined不是函数pricingurls.js？ver = 4.1：1（匿名函数）'。深入探讨这一点。感谢所有迄今为止的输入！ – rhand 2015-02-10 10:26:22

现在从页脚而不是页眉加载它，但错误仍然存在。 – rhand 2015-02-10 10:53:19

我不明白你的问题。

但是，我认为你想wrap的div与<a> - 它会让你div为link -

你可以不喜欢下面的代码。

$(function(){ $(".pricing-table-one-center").wrap("<a href='#'></a>"); });

.wrap() - 收（）方法包装每个所选择的元件的周围指定的HTML元素（一个或多个）。

来源

2015-02-10 06:58:24 prog1011

是的，我知道我有时候很难效仿。那是因为这对我来说有点困难:)。问题在于，有许多具有相同类的表格单元（div）。只有少数我想要链接到某些pdf。那么我怎样才能抓住BRUNCH的div，并将其链接到domain.nl/wp-content/uploads/2015/02/09/x.pdf？ – rhand 2015-02-10 07:01:23

@rhand - 您的意思是我们可以像“BRUNCH”一样搜索文本 - 即 - 如果我们在最后一个子元素中获得文本“BRUNCH”，那么我们可以为父DIV创建链接 - 是吗？ – prog1011 2015-02-10 07:35:39

我的意思是，我需要有一些餐馆菜单标题链接到不同的pdf文件。所以是的，如果我可以在h5内搜索词并且使它链接到可用于BRUNCH和其他一些菜单项的pdf选择。还要检查一种方法，在$ output（php为表格单元格生成html）中添加一个随机ID，这样我就可以选择特定的div或h5来让我的生活更轻松.. – rhand 2015-02-10 07:38:52

将div转换为JavaScript的链接，限制编号。类和无IDS

回答

相关问题