Question

我想复制<span>内<div>的样式，其中包含select_option_colorpicker和selected。

必须设置/更改样式的值。

我想将另一个<div>的背景颜色设置为所选<span>的样式。

我要修改的页面位于：http://www.panel-it.eu/shop/family-sticker/

我有以下代码：

HTML：

<div class="select_box_colorpicker select_box attribute_pa_kleuren-muurstickers">
<div class="select_option_colorpicker select_option"><span style="background-color: rgb(229, 219, 183); background-position: initial initial; background-repeat: initial initial;"></span>
</div>
<div class="select_option_colorpicker select_option"><span style="background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;"></span>
</div>
<div class="select_option_colorpicker select_option selected"><span style="background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;"></span>
</div>

JS：

$( ".select_box_colorpicker" ).click(function() {
  console.log($( ".select_option_colorpicker" ).hasClass( "selected" ));
});

提前致谢。

Answer 1

首先，您必须使用first（）函数选择此 div 的孩子，然后您可以从该孩子中随意添加任何内容

所以你想要提取它的孩子？

      $( ".select_box_colorpicker" ).click(function() {
         childStyle =  $( ".select_option_colorpicker" ).children();
         console.log(childStyle);

      });

这样你就可以在控制台中得到它：

    Object { 0: <span>, 1: <span>, 2: <span>, 3: <span>, 4: <span>, 5: <span>, 6: <span>, 7: <span>, 8: <span>, 9: <span>, 11 more… } test.html:42

所以，如果你这样做：

      $( ".select_box_colorpicker" ).click(function() {
         firstchildStyle =  $( ".select_option_colorpicker" ).children()[0]; // <---------
         console.log(firstchildStyle);

      });

你将得到第一个孩子，然后像这样进入你想要的任何选择

Answer 2

您可以将类选择器组合到具有多个类的特定元素，例如$(".class1.class2")。

在这种情况下，您可以使用类<span>访问.select_option_colorpicker内的selected样式，如：

$(".select_box_colorpicker").click(function() {
  console.log($(this).find(".select_option_colorpicker.selected span").attr("style"));
});

获取span样式的onclick div

2 个答案: