加载脚本时如何在jquery中选中一个框时更改背景

Posted 2023-05-09

【中文标题】加载脚本时如何在jquery中选中一个框时更改背景

【英文标题】：How to change a background when checking a box in jquery when a script loads

【发布时间】：2021-05-04 16:37:21

【问题描述】：

我的代码有问题。它是高级自定义字段块中的一个复选框，用于更改背景颜色。当您单击复选框时，它不会更改颜色。我知道 ACF 块必须使用 $(document).on('change', function ()，并且除了单击复选框之外，我还可以执行其他有效的功能。

我的代码：

jQuery(document).ready(function ($) 
   $(document).on('change', function () 
      if ($("input#acf-block_60160a1a4dc32-field_5f8cf27e7c048-two_img_left_set_featured_img").is(':checked')) 
        $(".acf-field-5f8cf27e7c048").css('background':'black');
       else 
        $(".acf-field-5f8cf27e7c048").css('background':'white');
      
   );
);

【问题讨论】：

嗨，你也可以显示html吗？

【参考方案1】：

不能说我对 wordpress 有任何经验，但从总体上看，为整个文档设置一个 change 侦听器可能会产生意想不到的后果，因为任何会触发更改（其他输入、选择、文本区域、等）将运行此代码。您是否尝试过为 .on() method 提供选择器参数以更好地确定该处理程序的范围？

$(document).on(`change`, `input#acf-block_60160a1a4dc32-field_5f8cf27e7c048-two_img_left_set_featured_img`, function () 
  $(`.acf-field-5f8cf27e7c048`).css(`background`, $(this).is(`:checked`) ? `black` : `white`);
);

【参考方案2】：

@Gregory 单选按钮是实现此目的的正确方法。下面是radion和checkbox的两种方式。

带有单选按钮，例如下面是您的 html。

<input type="radio" class="myclass" value="colorwhite" name="mycolor">white
<br>
<input type="radio" class="myclass" value="colorblack" name="mycolor" checked="checked">black

下面是你的javascript代码

<script>
jQuery(document).on('click', '.myclass', function(e)
var radioValue = jQuery("input[name='mycolor']:checked").val();
if(radioValue)
console.log('radioValue ' + radioValue);


if(radioValue =="colorwhite")

jQuery(".acf-field-5f8cf27e7c048").css("background-color": "white");


if(radioValue =="colorblack")

jQuery(".acf-field-5f8cf27e7c048").css("background-color": "black");



);
</script>

通过复选框。下面是实现它的示例。

<input type="radio" class="myclass" value="colorwhite" name="mycolor">white
    <br>
    <input type="radio" class="myclass" value="colorblack" name="mycolor" checked="checked">black

<script>
    jQuery(document).on('click', '.myclass', function(e)
    var selected_color = jQuery("input[name='mycolor']:checked").val();
    if(selected_color)
    //console.log('radioValue ' + selected_color);
    

    if(selected_color =="colorwhite")
    
        console.log(selected_color);
    jQuery(".acf-field-5f8cf27e7c048").css("background-color": "white");
    

    if(selected_color =="colorblack")
    
        console.log(selected_color);
        jQuery(".acf-field-5f8cf27e7c048").css("background-color": "black");
    


    );
    </script>

【讨论】：

OP 明确声明checkbox。如果这可行，那就太好了，但它不能回答他们的问题。

@PoorlyWrittenCode 因为单选按钮是实现它的正确方法。 Stackover 流程​​有助于指导新手所以这就是我提到单选按钮的原因。虽然我也提到了复选框。为什么你把它标记为负面？