为wordpress的单选按钮的label元素添加一个id或类

Question

在结帐页面中，我想添加单独的图像而不是每个单选按钮。我在这里找到了怎么做。

这里的问题是，我不能添加一个单独的ID或类标签元素，似乎需要用实际的图像替换单选按钮。比我目前得到的还低。我不能针对标签具体显示在GitHub线程。

有没有人知道如何使用PHP或JavaScript添加类?或者其他方式。

提前感谢!

这里是HTML:

<span class="woocommerce-input-wrapper">
<input type="radio" class="input-radio " value="Banana" name="radioButtonForm" id="radioButton1">
<label for="radioButton1" class="radio ">Banana</label>

<input type="radio" class="input-radio " value="Apple" name="radioButtonForm" id="radioButton2">
<label for="radioButton2" class="radio ">Apple</label>

<input type="radio" class="input-radio " value="Pear" name="radioButtonForm" id="radioButton3">
<label for="radioButton3" class="radio ">Pear</label>

<input type="radio" class="input-radio " value="Tomato" name="radioButtonForm" id="radioButton4">
<label for="radioButton4" class="radio ">Tomato</label>

</span>

这里是CSS:

.woocommerce-input-wrapper input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

#radioButton1 .radio{
background-image:url(http://i.imgur.com/SJbRQF7.png);
}
#radioButton2 .radio{
background-image:url(http://i.imgur.com/lXzJ1eB.png);
}
#radioButton3 .radio{
background-image:url(http://i.imgur.com/SJbRQF7.png);
}
#radioButton4 .radio{
background-image:url(http://i.imgur.com/lXzJ1eB.png);
}

Answer 1

我们可以使用preg_replace来定位我们的标签并添加我们的类。

<?php
add_action( 'wp_loaded', function() {
function wp_custom_radio_add_class( $subject ) {
if( ! is_admin() && is_checkout() || is_page( 'checkout' ) ) {
$search = [
'/<label for="radioButton1" class="radio ">/',
'/<label for="radioButton2" class="radio ">/',
'/<label for="radioButton3" class="radio ">/',
'/<label for="radioButton4" class="radio ">/',
// ... etc.
];
$replace = [
'<label for="radioButton1" class="radio label_custom_class_1">',
'<label for="radioButton2" class="radio label_custom_class_2">',
'<label for="radioButton3" class="radio label_custom_class_3">',
'<label for="radioButton4" class="radio label_custom_class_4">',
// ... etc.
];
$subject = preg_replace( $search, $replace, $subject );
return $subject;
};
};
ob_start( 'wp_custom_radio_add_class' );
} ); ?>

Answer 2

如果我正确理解了你的问题，你不需要在你的标记中添加自定义的id或class。将CSS选择器切换为使用+-sibling选择器就足够了。我制作了一个JSFiddle来演示这种解决方案:

https://jsfiddle.net/6rsf79xz/