javascript - 如何更改第二次单击时的不透明度？

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并在单击时更改为不透明度=1，然后在第二次单击时再次更改为不透明度=0？

Answer 1

我不熟悉 SVG 或这里的语法，但正如 Austin 在评论中建议的那样，当我有这样的事情时，我通常会这样做:

样式和标题变量:

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

var toggleSelected = true;

然后点击...

.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 bool 值，第一次点击时将设置为0，第二次点击时设置回1。

不过我不知道语法。

编辑: Austin也指出了这个答案，Jquery change opacity of div on click .