jQuery的工作不改变CSS在Magento

Question

我已经my site运行下面的代码属性：

<style> 
#main {background-color:#000000; border-top: 0; 
padding-bottom: 20px; 
min-height: 350px;} 

.col-main {float: left; 
width: 740px; 
padding: 0 0 1px; 
color:#FFFFFF; 
background-color:#AABBCC;} 

.col-right {float: right; 
width: 200px; 
padding: 0 0 1px; 
color:#0F0F0F; 
background-color:#DDEEFF;} 

img {height:250px; width:250px;} 
h1 {color: #ddeeff;} 
</style> 

<script type="text/javascript"> 
jQuery.noConflict(); 
        if (jQuery(".col-right").height() > jQuery(".col-main").height()) 

              { 
jQuery(".col-main").height(jQuery(".col-right").height()); 
} 
else { 
jQuery(".col-right").height(jQuery(".col-main").height()); 
} 

</script> 

<div id="main"><h1>Main</h1> 
<div class="col-main"><img src="http://foryourc- store.com/media/favicon/default/FYCS_icon-01.png"/> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat fermentum nunc a eleifend. Phasellus ut est at justo porttitor gravida. Praesent ut placerat lacus. Etiam consectetur tortor vel nibh sodales semper. Praesent quam magna, pharetra non viverra et, porta a nisi. Aenean et mi ante. Duis a nunc metus, at hendrerit quam. Aenean molestie orci placerat mauris varius non cursus ipsum commodo. Donec sit amet ultrices ligula. Nam egestas ligula vitae justo scelerisque pulvinar. Nunc vestibulum fermentum ligula, vel consequat velit lobortis sed. Suspendisse et dolor lectus, sed dignissim justo. Vivamus rhoncus volutpat rutrum. Quisque pretium mi in enim bibendum in ultrices mi molestie.</div> 

<div class="col-right"><img src="http://foryourc-store.com/media/favicon/default/FYCS_icon-01.png"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat fermentum nunc a eleifend. Phasellus ut est at justo porttitor gravida. Praesent ut placerat lacus. Etiam consectetur tortor vel nibh sodales semper. Praesent quam magna, pharetra non viverra et, porta a nisi. Aenean et mi ante. Duis a nunc metus, at hendrerit quam. Aenean molestie orci placerat mauris varius non cursus ipsum commodo. Donec sit amet ultrices ligula. Nam egestas ligula vitae justo scelerisque pulvinar. Nunc vestibulum fermentum ligula, vel consequat velit lobortis sed. Suspendisse et dolor lectus, sed dignissim justo. Vivamus rhoncus volutpat rutrum. Quisque pretium mi in enim bibendum in ultrices mi molestie.<br>Integer pharetra sapien metus. Mauris bibendum eleifend luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque elementum lobortis luctus. Duis tristique leo sed velit commodo eu consequat magna eleifend. In hac habitasse platea dictumst. Vestibulum sed neque a tellus auctor viverra sit amet sit amet dui. Aliquam dui mi, iaculis sit amet sagittis et, iaculis eu lacus. Morbi viverra tellus non nisl ultrices interdum. Praesent in turpis non justo mollis elementum vel eget velit. Aliquam pulvinar hendrerit tincidunt. Quisque tortor quam, lacinia ut elementum in, lacinia at arcu. Integer porta tincidunt urna nec semper. Vivamus gravida odio id ante adipiscing eu ultricies elit eleifend. Nulla lectus quam, malesuada sed rutrum ac, placerat sed mi. Donec bibendum sagittis dapibus.</div></div> 

我运行Magento的CE 1.7.0.2。代码在这里工作正常：http://jsfiddle.net/scoosethemoose/YxNwm/

请帮我确定什么是不正确工作。先谢谢你。

Answer 1

你应该像你的小提琴那样在$(window).load()的页面上运行代码。

在加载事件之前，您无法确定检索元素的最终尺寸，因为页面还没有完成渲染过程。

目前您的脚本工作正常（但并不像预期的那样），请检查.col - 右侧萤火虫内部，您将看到高度已分配给元素，因此您的脚本正在运行else分支。

Answer 2

假设你正在使用此http://sorgalla.com/jcarousel/

你得到的错误jQuery的（ '＃功能'）的jCarousel（）。因为的jCarousel插件库似乎并没有被列入（如果你jquery.jcarousel.min.js或查看的jCarousel源* .js文件）

您还装载jQuery的的2个不同的副本 - 需要删除一个

• foryourc-store.com/js/jquery/jquery-latest.js（版本1.8.2）

• 皮肤/前端/碱/默认/ ig_lightbox2/JS/jquery的-1.6。 2.min.js

此外，你可以创建一个不同的别名，jQuery的使用

var $j = jQuery.noConflict(); 
// Do something with jQuery 
$j(".col-main").height($j(".col-right").height()); 
// instead of jQuery(".col-main").height(jQuery(".col-right").height()); 
//then use magento prototype with 
$("content").style.display = 'none'; 

Answer 3

var $j = jQuery.noConflict(); 
$j(window).load(function() { 
if ($j(".col-right").height() > $j(".col-main").height()) 

{ 
    $j(".col-main").height($j(".col-right").height()); 
} 
else { 
    $j(".col-right").height($j(".col-main").height()); 
} 
});​ 

这解决了这个问题对我来说。