Question

我有一组像这样的链接

<a class="colorBox" href="#" title="#0676B3"></a>
<a ...
<a ... these are similar links with the title containing the color value
<a ...

我的目标是使用jQuery获取title属性的值，并使用.css（）将其插入后台。

我最近的尝试是：

$(document).ready(function(){
      $('a.colorBox').find().attr('title',function(){
          var color = (this);
          $('a.colorBox').css('background',color);
      });
  });

粗略这只会返回错误。我确定这是因为你无法在.attr（）中进行回调。我可以轻松选择值，但如何将其存储到变量中？以及如何将变量更改为下一个链接标题值并使用它？用.each（）但是如何？

我还在学习，所以任何代码示例都会很棒，或者如果有API函数我不知道请告诉我

感谢

Answer 1

$(document).ready(function(){
    $('a.colorBox').each(function(){
      var $this = $(this);
      $this.css('background-color', $this.attr('title'));
    });
});

Answer 2

试试这个：

$(function() {
    $('a.colorBox').each(function() {
        $(this).css('background-color', this.title);
    });
});

但是，title可能不适合粘贴这样的值。你可能最好使用数据属性来完成你想要完成的任务，例如

<a class="colorBox" href="#" data-bgcolor="#0676B3"></a>

并将javascript更改为

$(function() {
    $('a.colorBox').each(function() {
        var self = $(this);
        self.css('background-color', self.attr('data-bgcolor'));
    });
});

Answer 3

$(document).ready(function(){
  $('a.colorBox').each(function(){
    $(this).css('background-color', $(this).attr('title'));
  });
});

Answer 4

尝试

$(function() {
    $('a.colorBox').each(function() {
        $(this).css('background-color', $(this).attr('title'));
    });
});

Answer 5

您应该尝试使用数据属性

<a class="colorBox" href="#" data-bgcolor="#0676B3"></a>

在js中，您可以使用jQuery数据方法来检索值

$(function() {
    $('a.colorBox').each(function() {
        $(this).css('background-color', $(this).data('bgcolor'));
    });
});

存储用于jQuery的属性值

5 个答案: