javascript - 单选按钮更改检测 SVG 动画

Question

当用户选择相应的单选按钮时，我需要运行 svg 动画；引用是单选按钮的值，相当于动画的 id。这是需要发生的事情的简化示例。

如果用户单击单选按钮，则具有该名称的所有单选按钮都需要具有绿色或蓝色背景:如果是选中的按钮，则为蓝色，如果不是，则为绿色。

$('input[type="radio"]').change( function(){

    var $scribbleSelectorName = $(this).attr('name');
    var $scribbleSelectorInputs = $("input[name=" + $scribbleSelectorName + "]");

    $($scribbleSelectorInputs).each(function(){


        if ($(this).attr("checked")) {
            $(this).css("background","green");
        }

        else {
            $(this).css("background","blue");
        }

    });

});

这是一个fiddle 。我已经研究了很多类似的问题，但似乎没有任何效果。

Answer 1

您的背景可以工作，但不可见。我更改为突出显示父元素，即 <li> .

$(this).parent().css("background","green");

我也改了$(this).attr("checked")至$(this).prop("checked") .

关于问题的第二部分，您可以加载如下动画:

$('input[type="radio"]').change( function(){
    var $scribbleSelectorName = $(this).attr('name');
    var $scribbleSelectorValue = $(this).attr('value');
    var $image = $('<img/>', {
        'src': imagesMap[$scribbleSelectorName][$scribbleSelectorValue]
    });
    $('.svg-container.' + $scribbleSelectorName).empty().append($image);
});

var imagesMap = {
    test: {
        'A': 'http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/acid.svg',
        'B': 'http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/adobe.svg',
        'C': 'http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/alphachannel.svg',
        'D': 'http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg'
    },
    anotherGroupOfInputs: {
        //...
    }
};

演示 https://jsfiddle.net/mattydsw/gfpj3qsx/2/