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: {
        //...
    }
};

DEMO https://jsfiddle.net/mattydsw/gfpj3qsx/2/

单选按钮更改检测SVG动画

1 个答案: