单选按钮更改检测 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/