1

我有一个带有自定义侧边栏的 wordpress 网站，以便我们在其中投放促销广告。相同的布局在 10 个不同的页面上执行。侧边栏的左侧是“主要内容”区域。

侧边栏区域从一个单独的 sidebar.php 文件中提取，该文件具有一个无序列表的元素（apx. 25），每个元素都由图像和文本组成。Onload 运行 shuffle.js 函数，以便每次显示不同的促销。

这是我目前拥有的脚本。

<script type='text/javascript'>//<![CDATA[ 
$(function(){
var li = $('ul li');
var len =li.length;
while($('#shuffleunorderedlist li:visible').length > 28) {
li.eq(parseInt(len * Math.random(), 10)).hide();
}
);//]]>  
</script>

<!--JS shuffle scripts I added at launch-->
<script language="javascript" type="text/javascript"       src="http://orlandovisitornetwork.com/wp-content/themes/Paradise/js/jquery.shuffle.js">       </script>
<script type="text/javascript">jQuery(function($){window.onload = function(){
$('#shufflemultidivcontainer, #shuffleunorderedlist, #shufflemultidivcontainerhotels').shuffle();
};
});
</script>
<!--END shuffle JS Scripts-->​

问题是客户希望每个页面列是均匀的，从同一个促销池中提取并随机显示它们。不幸的是，所有 li 的高度都不同。

目前，当我添加或删除促销并隐藏会导致“主要内容”和“侧边栏”高度不均匀的 li 时，我必须进入每个页面的代码。当然，这不会让他们变得更平，但非常接近它。

为了自动化这一点，我试图找出一种方法来随机播放促销列表，查看“主要内容”的高度并显示尽可能多的随机播放促销，以便“侧边栏”等于或略小于'主要内容'。我有一个想法，但主要内容并不总是相同的高度，而且 li 的高度不同让我失望。

我在 jQuery 中寻找 WP 插件和一些可能对我有帮助但没有找到的东西。

我希望我说清楚了。感谢任何建议和答案。谢谢

你可以在这里看到我到目前为止所拥有的 jsfiddle.... http://jsfiddle.net/2cPMm/

4

2 回答 2

0

嗯，我想您可以遍历 li 元素并查看它们的位置是否低于感兴趣的 div 的位置。如果是这样，请将它们隐藏起来。

foreach(li in whateverElement)    
    if(li.pos.y > div.pos.y)
        li.hide();
于 2012-12-07T19:33:37.470 回答
0

这是实际上为我工作的代码。（当然，我是在堆栈上的每个人的帮助下来到这里的。

jQuery(function($)
{
    // Shuffle 
$('ul').shuffle();

// Watch Columns 
var mainHeight = $('#main').outerHeight();
var sidebarHeight = $('#sidebar').outerHeight();

// Compare and hide li 
if (mainHeight < sidebarHeight) { // You are hiding things from the sidebar correct?      Strictly speaking, this check isn't necessary, but it prevents us from looping when we don't   need to. 
 $('div#sidebar li').each(function() {  // I removed reverse as it gave me a reference  error. If it is defined for you, feel free to use it. 
    if (sidebarHeight > mainHeight) {  
        $(this).hide();  // hide only the current element
        sidebarHeight = $("#sidebar").outerHeight(); // update sidebarHeight 
    }
});
}
  });
于 2012-12-27T20:58:49.997 回答