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()的页面中运行代码，就像小提琴一样。

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

目前你的脚本工作（但不是预期的），检查firebug中的.col-right，你会看到已经为该元素分配了一个高度，所以你的脚本正在运行else-branch。

Answer 2

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

你在jQuery上遇到错误（'＃featured'）。jcarousel（）;因为似乎没有包含jcarousel插件库（如果你查看jquery.jcarousel.min.js或jcarousel * .js的源代码）

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

foryourc-store.com/js/jquery/jquery-latest.js（ver 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());
}
});

这解决了我。

jquery没有工作改变magento中的css属性

3 个答案: