두 번째 클릭시 불투명도를 변경하는 방법은 무엇입니까?

Question

다른 라벨로 클릭 할 때 라벨의 불투명도를 변경합니다.

<style> 
.selected { 
    opacity: 0; 
} 
</style> 

var linktext = svg.selectAll('g.linklabelholder').data(force.links()) 
    linktext.enter().append('g') 
    .attr('class', 'linklabelholder') 
     .append('text') 
    .attr('class', 'linklabel') 
    .style('fill','red') 
    .style('font','10px') 
    .text(function(d) { return d.name }) 
    .call(force.drag) 
    .on("click", function (d){ 
      d3.select("#i" + d.inn).classed("selected", true); 
     }); 

var linktext_add = svg.selectAll('g.linklabelholder_add').data(force.links()) 
    linktext_add.enter().append('g') 
    .attr('class', 'linklabelholder_add') 
    .attr('id', function(d) { return 'i'+ d.inn; }) 
    .attr('class', 'linklabel_add') 
    .append('text') 
    .style('fill','black') 
    .style("font-size","10px") 
    .attr("text-anchor", "right") 
    .attr("dy", -16) 
    .text(function(d) { return d.inn; }); 

어떻게 다시 불투명 = 0에 두 번째 클릭에 먼저 불투명도 = 0을 클릭에 불투명도 = 1로 변경하고 다음은 코드의 단편이다?

Answer 1

나는 SVG 또는 여기 구문에 익숙하지 않다, 그러나 오스틴은 코멘트에 제안,이 같은 내가 이런 일이있을 때 나는 보통 할 것입니다 :

스타일링 및 헤더 바르 :

을 당신의 클릭에 ...

.on("click", function (d){ 
      if(toggleSelected == true) { 
       d3.select("#i" + d.inn).classed("selected", true); 
       toggleSelected = false; 
      } else { 
       d3.select("#i" + d.inn).classed("deselected", true); 
       toggleSelected = true; 
      } 
}); 

이

은 toggleSelected 부울 0으로 두 번째에 설정 될 첫 번째 클릭 클릭을 설정하는 것입니다 자체에 대한

<style> 
.selected { 
    opacity: 0; 
} 
.deselected { 
    opacity: 1; 
} 
</style> 

var toggleSelected = true; 

그리고 다시 한 번.

구문에 대해서는 잘 모릅니다.

편집 : 오스틴도이 대답을 Jquery change opacity of div on click으로 지적했습니다.

Answer 2

toggleClick jQuery 플러그인을 사용하면 필요한만큼 콜백을 가질 수 있습니다. 이 당신의 콜백의 수는 경우에 따라서, 첫 번째 홀수 클릭 트리거됩니다 심지어 두 번째는 클릭 할 때 :

$.fn.toggleClick = function(){ 
    var methods = arguments, // store the passed arguments for future reference 
     count = methods.length; // cache the number of methods 

    //use return this to maintain jQuery chainability 
    return this.each(function(i, item){ 
     // for each element you bind to 
     var index = 0; // create a local counter for that element 
     $(item).click(function(){ // bind a click handler to that element 
      return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element 
      // the index % count means that we constrain our iterator between 0 and (count-1) 
     }); 
    }); 
}; 

사용법 :

$('.selector').toggleClick(funcA [,funcB] [,funcC] ....[,funcZZZ]); 

참조 :

https://github.com/maniator/jQuery-toggleClick