Question

基本上，有一个我正在研究的投资组合网站，其中包含超过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根据“name”设置计算，然后插入同名的选择器（添加“-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中有所有元素的类，但你可以想象随着投资组合的增长，这将会很长。）

Answer 1

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

Answer 2

要检索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。

Answer 3

试试这个：

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

这将遍历所有匹配的元素，并使用适当的名称

相应地为每个元素应用背景

Answer 4

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

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

使用jQuery根据“名称”设置div的背景图像

4 个答案: