使用 JQuery 更改元素的属性答案

【问题标题】：Changing elements' properties with JQuery使用 JQuery 更改元素的属性
【发布时间】：2011-09-17 00:23:42
【问题描述】：

我已经用 JQuery 解决了 2 个小时的问题，但我什么也得不到。

我正在创建一个带有 div 幻灯片的网站，好吗？所以你有一个名为#content 的主div，在里面我有另一个名为#slides 的div。但我想要其中的 4 个，所以再一次，里面有 4 个部分。

有什么问题？每个部分都有自己的高度，所以#slides 高度是其中最高的，这使得页脚看起来非常低并且有很多空白空间。因此，每次更改部分时，我都尝试使用 JQuery 更改 #slides 高度，以便为页脚保持相同的边距并始终保持相同的空白部分，但我不知道该怎么做。

所以我在搜索文档，我知道我必须使用 animate() 方法，就像这样

$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

我只需要添加一个新的 CSS 属性来上传当前高度。但是我该怎么做呢？我对JQuery一无所知。

我是新手，这些美丽的东西对我来说是新的，我正试图自己去发现它们，但在某些时候，我不知道如何解决它并继续.. .

谢谢！

edit：第一次，在任何人都可以看到信息之前，您可以将高度设置为第一张幻灯片。使用$('#slides').height($('.slide').height()); 非常简单我的问题是将高度更新为每次按下按钮时都会看到的新部分。

【问题讨论】：

您在不同部分是否有多个具有相同 ID 的对象？在任何一个网页中，您只能拥有一个具有给定 ID 的对象。
不，我只有 1 个名为 #slides 的 div 容器和几个名为 .slide 的部分，所以这不是问题。无论如何，谢谢。

标签： jquery elements

【解决方案1】：

您需要一种方法来确定哪些幻灯片是当前活动的。

在您的编辑中，您的内部表达式$('.slide').height() 应该被改进为只匹配您想要的那个。这是因为$('.slide') 匹配所有您的幻灯片。（因此只返回第一个的高度。）

但是，如果您在当前可见的幻灯片上有一个“活动”或“当前”类，或者如果您知道正在显示的幻灯片的索引/编号，您可以改进它。例如，$('.slide.current') 或 $('.slide').eq(idx)

也许如果您可以详细说明您提到的“按下按钮”时运行的代码，我们可以看到在其中添加一些额外的东西来帮助我提到的这个识别。然后，您可以将高度修改添加到您已经为左边距调用的相同动画方法中。

祝你好运！

【讨论】：

【解决方案2】：

好的，我相信我终于解决了。我试图放置一些 id 来标识部分（.slide），但我的 PHP 代码动态生成部分，所以我不知道如何以这种方式放置不同的 id。

出于这个原因，我尝试了一个更简单且不同的想法。在 JS 脚本中有一个先前的循环，它获取所有 .slide 的宽度并计算总宽度，以便稍后将总宽度分配给容器#slides。所以我对高度做了同样的事情

var heights = new Array();

/* Loop to save every height */    
$('#slides .slide').each(function(i) {
     heights[i] = $(this).height();
}

/* Setting the #slides height to the first .slide height */
$('#slides').height($('.slide').height());

/* And finally, the animation when someone "push the button" */
$('#menu ul li a').click(function(e,keepScroll) { 
     var pos = $(this).parent().prevAll('.menuItem').length;
     $('#slides').stop().animate( {height:heights[pos]+'px'}, 450);
}

谢谢大家。我是个大菜鸟，但我发现我喜欢网页设计^^

【讨论】：