Question

如何删除引号并将十六进制值传递给jquery，以便每个值都可以用作背景颜色？

 <div class="someclass"> " #ffff1 " </div>
 <div class="someclass"> " #ffff2 " </div>
 <div class="someclass"> " #ffff3 " </div>
 <div class="someclass"> " #ffff4 " </div>
 <div class="someclass"> " #ffff5 " </div>


  <script type="text/javascript">
  $(document).ready(function() {
      $(".someclass").hover(
      function() {
          //mouse over
          $(this).css('background', '*pass it here*')
      }, function() {
          //mouse out
          $(this).css('background', '')
      });
  });
  </script>

Answer 1

你也可以这样做：

'PAF','PFA','USABA','USALR','USBUR','USDUR','USFIR','USPAN','USTAM','UYALR','UYAVI','UYBUR','UYDIR','UYDUR','UYE73','UYFIR','UYMED','UYPAN','UYTAM'

上面的代码解释了：

$(this).css('background', this.innerHTML.replace(/[" ]/g, '')) =获取div的内容
this.innerHTML =正则表达式抓取所有引号（/[" ]/g）和空格（"）
=用于删除正则表达式所找到的内容的函数，只保留您颜色的十六进制代码。

Answer 2

使用正则表达式仅提取#xxxxxx部分并删除其余部分：

var color = /#[0-9a-f]+/.exec($(this).html())[0];
$(this).css('background', color)

此外，颜色只有5个字符，通常应为6个字符。

＆＃13;

$(document).ready(function() {
      $(".someclass").hover(
      function() {
          var color = /#[0-9a-f]+/.exec($(this).html())[0];
          $(this).css('background', color)
      }, function() {
          $(this).css('background', '')
      });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="someclass"> " #ff0011 " </div>
<div class="someclass"> extra things " #ff0022 " </div>
<div class="someclass"> " #aaff00 " some other things </div>
<div class="someclass">123 " #ff00ff " 456</div>
<div class="someclass"> " #002233 " </div>

＆＃13;

Answer 3

这应该有效：

 <div class="someclass"> " #ffff1 " </div>
 <div class="someclass"> " #ffff2 " </div>
 <div class="someclass"> " #ffff3 " </div>
 <div class="someclass"> " #ffff4 " </div>
 <div class="someclass"> " #ffff5 " </div>


  <script type="text/javascript">
  $(document).ready(function() {
      $(".someclass").hover(
      function() {
          //mouse over
          $(this).css('background', $(this).html().replace(/\"/g , ""));
      }, function() {
          //mouse out
          $(this).css('background', '')
      });
  });
  </script>

Answer 4

这会检查是否有引号，因此它们是可选的。

$(document).ready(function() {
  $(".someclass").hover(
    function() {
      //mouse over
      var color = $(this).html().trim();
      if(color[0] === '"' && color[color.length-1] === '"'){
       color = color.substring(1, color.length-2).trim();
      }
      $(this).css('background', color)
    }, function() {
      //mouse out
      $(this).css('background', '')
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass"> " red " </div>
 <div class="someclass"> " #000 " </div>
 <div class="someclass"> " #000123 " </div>
 <div class="someclass"> " #123123 " </div>
 <div class="someclass"> green </div>

Answer 5

另一种方法是拆分字符串并提取十六进制代码：

let color = $(this).html().split(' ')[2];
$(this).css('background', color);

$(document).ready(function() {
  $(".someclass").hover(
    function() {
      //mouse over
      let color = $(this).html().split(' ')[2];
      $(this).css('background', color);
    }, function() {
      //mouse out
      $(this).css('background', '')
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass"> " #ffff12 " </div>
<div class="someclass"> " #aaff23 " </div>
<div class="someclass"> " #bbff34 " </div>
<div class="someclass"> " #ccff45 " </div>
<div class="someclass"> " #ddff56 " </div>

Answer 6

你可以这样做

textColor = $(this).html(); //get text
textColor= textColor.replace('"',''); //remove the quotes
textColor= textColor.replace(/\s+/g, ''); //remove spaces
$(this).css('background', textColor); //use

Answer 7

借助String#match方法使用正则表达式获取颜色代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">" #ffff10 "</div>
<div class="someclass">" #ffff20 "</div>
<div class="someclass">" #ffff30 "</div>
<div class="someclass">" #ffff40 "</div>
<div class="someclass">" #ffff50 "</div>
<div class="someclass">" #156 "</div>


<script type="text/javascript">
  $(document).ready(function() {
    $(".someclass").hover(
      function() {
        //mouse over
        $(this).css('background', $(this).text().match(/#(?:[\da-f]{6}|[\da-f]{3})/i)[0])
      }, function() {
        //mouse out
        $(this).css('background', '')
      });
  });
</script>

Answer 8

只需输入此代码

即可

 $(".someclass").hover(function() {
         $(this).css('background-color', $(this).html().replace('"','').replace(' ',''));
    }
, function() {
    $( this ).css(  'background-color', '');
  }
);

Answer 9

用

替换$(this).css('background', '*pass it here*')

$(this).css('background', $(this).html())

将div内容传递给jquery

9 个答案: