單選按鈕更改檢測SVG動畫

我需要在用戶選擇相應的單選按鈕時運行svg動畫;引用是單選按鈕的值等於動畫的ID。這是一個需要發生的事例。單選按鈕更改檢測SVG動畫

如果用戶單擊一個單選按鈕，則具有該名稱的所有單選按鈕都需要具有綠色或藍色背景：如果它是選中的按鈕，則爲藍色;如果不是，則爲綠色。

$('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。我已經瀏覽了許多類似的問題，但似乎沒有任何工作。

來源

2015-10-23 Mariah Weathersby

瑪麗亞嗨。請提供一個工作示例。這裏首選的方法是使用[代碼片段]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。 –

@PaulLeBeau我已經更新了這個問題，幷包括一個小提琴。 –

您的背景有效，但無形。我更改爲突出顯示父元素，即<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/

來源

2015-10-24 20:10:21 mkutyba

嘿@mkutyba你確實得到了小提琴的工作，但由於某種原因，這仍然沒有解決我的問題。每個輸入和它們對應的SVG的HTML就像這個https://jsfiddle.net/mariahw1190/2gudqwr3/與SVG在同一個圖中。我試圖改變你的小提琴來選擇父級的子SVG元素進行動畫處理，但我仍然無處可尋：[ –

它應該如何動畫？這是一條靜態路徑。 – mkutyba

SVG只是一條路徑，stroke-dashoffset是動畫的屬性。我更新了小提琴以包含我用來製作動畫的腳本https://jsfiddle.net/mariahw1190/2gudqwr3/4/。現在，如果選擇了相關輸入，則動畫正確運行，但如果選擇了具有相同名稱的另一個輸入，則SVG快速偏移不會重置。 –

單選按鈕更改檢測SVG動畫

回答

相關問題