2

基本上，有一个我正在开发的作品集网站，其中包含超过 15 个作品。希望能够使用我目前已经用于显示片段的“名称”选择器（即滑动最小值）来设置缩略图 div 的背景，而无需手动完成所有 CSS 标记。解释起来可能会令人困惑，也许我编写的这段代码（不起作用）可以提供帮助。

这是实际的缩略图 HTML：

<a name="allies" class="portbox port-link allieslink">
    <div class="port-info">
        <h3>Creative Allies</h3>
        <p class="port-label">Product</p>
        <p class="port-detail">Print Design</p>
        <p class="port-label">Year</p>
        <p class="port-detail">2010</p>
     </div>
</a>

截至目前，“allieslink”类在 CSS 中有这个：

.allieslink {
    background: url(IMG/portfolio/allies-link.jpg) center top no-repeat;
}

所以我想要做的是取出手动CSS - 让jQuery根据“名称”设置进行计算，然后插入同名选择器（添加“-link.jpg”）作为CSS。

这是我当前的 jQuery 代码（在文档就绪函数中）：

var artname= $(".port-link").name;
$(".port-link").css("background","url(IMG/portfolio/" + artname + "-link.jpg) center top no-repeat;");

显然，这是行不通的。我不确定为什么，因为我觉得我走在正确的道路上，这可能是一些愚蠢的事情。只是想弄清楚确切的 jQuery 以使其正常工作。帮助？

（截至目前，所有元素都有 CSS 类，但你可以想象随着产品组合的增长，这将变得很长。）

4

4 回答 4

1

尝试var artname= $(".port-link").attr("name")

于 2012-06-25T13:58:37.393 回答
1

检索name属性使用的值

var artname= $(".port-link").attr('name');

或者

 var artname= $(".port-link")[0].name;

您可以通过这种方式检索 name属性的值。但这并不能完全解决您的问题。在这种情况下，您必须遍历链接并为每个链接设置背景。您可以使用它.each()来做到这一点，甚至更好的是，您可以利用这样的.css()方法的隐式循环。

$(".port-link").css("background",function(){
   return "url(IMG/portfolio/" + this.name + "-link.jpg) center top no-repeat";
});

如果您希望将背景定位center bottom在悬停上，那么您可以像这样使用 jQuery 来做到这一点。

$(".port-link").hover(function(){
     // hover in set background position for hover
     $(this).css('background-position','center bottom');
 },function(){
     // hover out reset background position
     $(this).css('background-position','center top');
 });

并删除悬停CSS。

于 2012-06-25T13:58:50.853 回答
1

试试这个：

$(".port-link").each(function() {
    $(this).css('background', 'url(IMG/portfolio/' + $(this).attr("name"); + '-link.jpg) center top no-repeat');
});

这将遍历所有匹配的元素，并使用适当的名称为每个元素应用背景

于 2012-06-25T13:59:46.097 回答
0

您想获取属性名称，而不是某些可能甚至不存在的字段名称：

var artname= $(".port-link").attr('name');

于 2012-06-25T14:01:16.120 回答