Question

嗨，我有从项目中使用过的zibbra插件。插件运行得很好。我的问题是如何从加载的插件中将自定义添加到生成的类中？下面是我的HTML代码

{!! $yourVar or ''!!}

我想根据这个

自定义和修改css

<div id="zibbra-category">
<div class="row">
<div class="col-xs-12 col-md-2">
<div id="zibbra-product-14215" class="thumbnail">
<a href="http://doorbraakboeken.be/zibbra/product/14215-dorpstraat---wetstraat/">
<img src="https://cdn.zibbra.com/p/14215/1474534650.jpg?width=160&height=160" alt="Dorpstraat - Wetstraat">
</a>
<div class="caption text-center">
<h3 class="name">Dorpstraat - Wetstraat</h3>
<p class="description">In Dorpstraat - Wetstraat gaat Peter Reekmans dieper in op twee politieke niveaus en vooral de invloed van de Wetstraat op de Dorpstraat.</p>
<p class="price">€ 22,95</p>
<a class="btn btn-primary" href="http://doorbraakboeken.be/zibbra/product/14215-dorpstraat---wetstraat/" role="button">View product</a>
</div>
</div>
</div>
</div>
</div>

非常感谢任何帮助.TIA

Answer 1

我认为这可以使用jQuery和dom元素操作来完成。由于您正在使用与每个元素关联的id填充html，因此您可以轻松地从中获取有用信息。以下是参考：

var prodUrl = $('#zibbra-category').find('.thumbnail a').attr('href');
var prodimgSrc = $('#zibbra-category').find('.thumbnail img').attr('src');

一旦获得填充所需的信息，只需创建一个html字符串并将其包裹在现有div'＃zibbra-category'周围，以确保它位于正确的位置。

之后，只需隐藏'＃zibbra-category'div或替换它。将html字符串添加到容器中。

要记住一件事，当您使用jQuery时，wordpress有时不能与'$'一起使用。最好使用jQuery，因为它不会与正在使用的其他库产生任何冲突。

如果这有帮助，请告诉我。干杯!!!

/ ***这是代码* /

以下是代码。试试这个。

  jQuery.(document).ready(function($){


    var prodUrl = $('#zibbra-category').find('.thumbnail a').attr('href');
    var prodimgSrc = $('#zibbra-category').find('.thumbnail img').attr('src'); 
    var prodDetails = $('.caption ').html();
    $( "#zibbra-category" ).wrap( "<div class='container'></div>" );
    var modifiedHtmlStr = '<div class="row"><div class="col-md-4" ><div class="col-md-4"><a href="'+prodUrl +'"><img src="'+prodimgSrc +'"/></a></div><div class="col-md-8" >'+prodDetails +'</div></div></div>';
    $( "#zibbra-category" ).parent().html(modifiedHtmlStr );
    })

从wordpress插件定制生成的CSS

1 个答案: