Javascript 将div内容传递给jquery

如何剥离引号并将十六进制值传递给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>

“#ffff1”
“#ffff2”
“#ffff3”
“#ffff4”
“#ffff5”
$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
$（this.css（'background'，'*在此处传递*'））
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});

使用正则表达式仅提取

#xxxxxx

部分并删除其余部分：

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

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

$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
var color=/#[0-9a-f]+/.exec（$（this.html（））[0]；
$（this.css（'background'，color）
}，函数（）{
$（this.css（'background'，''）
});
});

“#ff0011”
额外物品“#ff0022”
#aaff00“其他一些东西
123英寸#ff00ff“456
“#002233”
使用正则表达式仅提取
#xxxxxx
部分并删除其余部分：

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

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


$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
var color=/#[0-9a-f]+/.exec（$（this.html（））[0]；
$（this.css（'background'，color）
}，函数（）{
$（this.css（'background'，''）
});
});

“#ff0011”
额外物品“#ff0022”
#aaff00“其他一些东西
123英寸#ff00ff“456
“#002233”
这应该可以：

 <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>

“#ffff1”
“#ffff2”
“#ffff3”
“#ffff4”
“#ffff5”
$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
$（this.css（'background'，$（this.html（）.replace（/\“/g）”）；
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});
这应该可以：

 <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>

“#ffff1”
“#ffff2”
“#ffff3”
“#ffff4”
“#ffff5”
$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
$（this.css（'background'，$（this.html（）.replace（/\“/g）”）；
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});
替换
$（this）.css（'background'，'*在此处传递*）
为

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

将
$（this.css（'background'，'*在此处传递*'）
替换为

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

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


$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
var color=$（this.html（）.trim（）；
如果（颜色[0]==''”&&color[color.length-1]==''”）{
color=color.substring（1，color.length-2.trim（）；
}
$（this.css（'background'，color）
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});

“红色”
" #000 " 
" #000123 " 
" #123123 " 
绿色
检查是否有引号，因此它们是可选的


$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
var color=$（this.html（）.trim（）；
如果（颜色[0]==''”&&color[color.length-1]==''”）{
color=color.substring（1，color.length-2.trim（）；
}
$（this.css（'background'，color）
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});

“红色”
" #000 " 
" #000123 " 
" #123123 " 
绿色
另一种方法是拆分字符串并提取十六进制代码：

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


$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
让color=$（this.html（）.split（“”）[2]；
$（this.css（'背景'，颜色）；
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});

“#ffff12”
“#aaff23”
“#bbff34”
“#ccff45”
“#ddff56”
另一种方法是拆分字符串并提取十六进制代码：

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


$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
让color=$（this.html（）.split（“”）[2]；
$（this.css（'背景'，颜色）；
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});

“#ffff12”
“#aaff23”
“#bbff34”
“#ccff45”
“#ddff56”
您可以这样做

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

您可以这样做

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

在方法的帮助下使用正则表达式获取颜色代码



“#ffff10”
“#ffff20”
“#ffff30”
“#ffff40”
“#ffff50”
" #156 "
$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
$（this.css（'background'，$（this.text（）.match（/#（？：[\da-f]{6}{124;[\ da-f]{3}）/i）[0]）
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});
在方法的帮助下使用正则表达式获取颜色代码



“#ffff10”
“#ffff20”
“#ffff30”
“#ffff40”
“#ffff50”
" #156 "
$（文档）.ready（函数（）{
$（“.someclass”）。悬停(
函数（）{
//滑过
$（this.css（'background'，$（this.text（）.match（/#（？：[\da-f]{6}{124;[\ da-f]{3}）/i）[0]）
}，函数（）{
//耗竭
$（this.css（'background'，''）
});
});
您还可以执行以下操作：

$(this).css('background', this.innerHTML.replace(/[" ]/g, ''))

上述代码解释如下：


this.innerHTML=获取div的内部内容
/[“]/g=正则表达式获取所有引号（
“
）和空格（
）
.replace（）=用于删除正则表达式找到的内容的函数，只保留颜色的十六进制代码
您还可以：

$(this).css('background', this.innerHTML.replace(/[" ]/g, ''))

上述代码解释如下：


this.innerHTML