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; });

如何使第一个opacity = 0并在点击时更改为opacity = 1，然后再次点击第二次更改为opacity = 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布尔值，第一次点击时设置为0，第二次点击设置为一次。

但我不知道语法。

编辑：奥斯汀也指出了这个答案，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

如何在第二次点击时更改不透明度？

2 个答案: