jquery를 통해 특정 요소의 속성 값을 바꿉니다

Question

사각형, 경로, 원, 선 등과 같이 너무 많은 요소가 포함 된 svg 차트를 만듭니다. 추가 할 요소뿐만 아니라 json 옵션을 전달하여 요소를 생성 중입니다. 아래 코드를 참조하십시오.

this.svgLink = "http://www.w3.org/2000/svg"; 


drawPath: function (options, element) { 
     var path = document.createElementNS(this.svgLink, "path"); 
     $(path).attr(options).appendTo(element); 

    }, 

    drawLine: function (options, element) { 
     var path = document.createElementNS(this.svgLink, "line"); 
     $(path).attr(options); 
     $(path).appendTo(element); 

    }, 

    drawCircle: function (options, element) { 
     var circle = document.createElementNS(this.svgLink, "circle"); 
     $(circle).attr(options).appendTo(element); 
    }, 
    drawEllipse: function (options, element) { 
     var ellipse = document.createElementNS(this.svgLink, "ellipse"); 
     $(ellipse).attr(options).appendTo(element); 
    }, 

오전은 아래 코드와 같은 옵션을 전달합니다.

var rectOptions = { 
      'id': this.svgObject.id +'_ZoomArea', 'x': x, 'y': y, 'width': width, 'height': height, 
      'fill': 'rgba(69,114,167,0.25)', 'stroke-width': 1, 'stroke':'rgba(69,114,167,0.25)','clip-path': 'url(#' + this.svgObject.id +'_ChartAreaClipRect)' 
     }; 

지금 난 그냥 단지 JQuery와의 $ .extend을 좋아하는 새 값으로 속성 값을 바꾸려면 다시 만드는 대신 이미 생성 된 특정 요소에 대한 몇 가지 다른 옵션을 전달하려는.

어떻게 속성 값을 새로운 값으로 바꿀 수 있습니까?

감사합니다,

시바

Answer 1

당신은 새 것으로 기존의 속성을 덮어 $(e).attr(rectOptions)를 사용할 수 있습니다.

나를 조금 걱정하는 한 가지 : 실제로는 id 옵션을 변경하면 안됩니다. 이는 요소를 업데이트하기 위해 이전 ID를 저장 한 코드를 혼동시킬 수 있습니다.

var id = '#' + this.svgObject.id +'_ZoomArea'; 
var rectOptions = { 
      'x': x, 'y': y, 'width': width, 'height': height, 
      'fill': 'rgba(69,114,167,0.25)', 'stroke-width': 1, 'stroke':'rgba(69,114,167,0.25)','clip-path': 'url(#' + this.svgObject.id +'_ChartAreaClipRect)' 
     }; 
$(id).attr(rectOptions);