html facetwp汽车演示单选按钮

Posted 2021-05-11

<style>
.facetwp-facet.facetwp-facet-vehicle_type {
    margin-bottom: 0;
}
.facetwp-facet-vehicle_type .facetwp-radio {
    display: inline-block;
    background: none;
    line-height: 48px;
    width: 120px;
    margin: 0;
}
.facetwp-facet-vehicle_type .facetwp-radio.checked {
    background: none;
}
.facetwp-facet-vehicle_type .facetwp-radio img {
    opacity: 0.3;
    vertical-align: top;
    width: 48px;
}
.facetwp-facet-vehicle_type .facetwp-radio.checked img {
    opacity: 1;
}
</style>

<script>
(function($) {
    $(document).on('facetwp-loaded', function() {
        var $parent = $('.facetwp-facet-vehicle_type');
        $parent.find('.facetwp-radio').each(function() {
            var $this = $(this);
            var type = $this.attr('data-value');
            var counter = $this.find('.facetwp-counter').text().replace('(', '').replace(')', '');
            $this.html('<img src="https://facetwp.com/wp-content/themes/fwp/img/icons/cars/' + type + '.svg" alt="' + type + '" /> ' + counter);
        });
    });
})(jQuery);
</script>