JQuery/Javascript/d3'点击'功能不能按预期工作

问题描述：

因此，基本上我有2个圈子：使用d3绘制的circle1和circle2。默认情况下，出现circle1，当它被点击时，它会显示div：'Circle1已被点击'。在点击下一个按钮时，出现circle2，我希望它显示div：当我点击circle2（这是不起作用的部分）时，点击了'Circle2'。JQuery/Javascript/d3'点击'功能不能按预期工作

<div class="questions"> 
    <div id="canvas1" class="v1"style="width:200px; height:135px;">Circle1</div> 
    <div id="div1" class="clickable" style="display:none;">You clicked Circle1</div> 
</div> 

<div class="questions"> 
    <div id="canvas2" class="v1"style="width:200px; height:135px;">Circle2</div> 
    <div id="div2" class="clickable" style="display:none;">You clicked circle2</div> 
</div> 

<input type="button" id="next" value="Next" onclick="sum_value()">

Javascript代码：

var totalQuestions = $('.questions').size(); 
var currentQuestion = 0; 
$questions = $('.questions'); 
$questions.hide(); 
$($questions.get(currentQuestion)).fadeIn(); 
var nee = $('#next').click(function(){ 
    $($questions.get(currentQuestion)).fadeOut(function(){ 
    currentQuestion = currentQuestion + 1; 
    if(currentQuestion == totalQuestions){ 
     alert('You have reached the end!'); 
    } else { 
     $($questions.get(currentQuestion)).fadeIn(); 
    } 
    }); 
}); 

    var msg = (function(){ 
    return function(){ 
     d3.event.stopPropagation(); 
     $("#div1").show(); 
    } 
})(); 

var whole = d3.selectAll('.v1'); 
    var wholeCanvas = whole.append("svg").attr("width", 200).attr("height", 135); 
wholeCanvas.append("circle").attr("cx", 50) 
          .attr("cy", 50) 
          .attr("r", 40) 
          .on("click", msg); 

//want something like this 
//var msg = (function(){ 
//  if(questions)[0] 
// return function(){ 
//  d3.event.stopPropagation(); 
//  $("#div1").show(); 
// } 
//   else if(questions)[1] 
//  return function(){ 
//  d3.event.stopPropagation(); 
//  $("#div2").show(); 
// } 
// })();

工作至今小提琴：https://jsfiddle.net/La6w0pxy/

我知道它可以通过分别安装在圆（D3对象）的div来完成（因此SVG的）并调用两个独立的函数。我想知道的是，不能通过使用if语句来完成下面的注释吗？

预先感谢您！

答

所以，我想我错了。以下两种方法为我工作：第一（通过分配ID）：

var whole = d3.select("#canvas1"); 
var wholeCanvas = whole.append("svg").attr("width", 200).attr("height", 135); 
wholeCanvas.append("circle").attr("cx", 50) 
          .attr("cy", 50) 
          .attr("r", 40) 
          .attr("id", 'hey'); 

var whole2 = d3.select("#canvas2"); 
var whole2Canvas = whole2.append("svg").attr("width", 200).attr("height", 135); 
whole2Canvas.append("circle").attr("cx", 50) 
          .attr("cy", 50) 
          .attr("r", 40) 
          .attr("id", 'hey2'); 

$("#hey").on("click", function(){ 
    $("#div1").show(); 
}); 

$("#hey2").on("click", function(){ 
    $("#div2").show(); 
});

它更新小提琴：https://jsfiddle.net/La6w0pxy/4/

二（不分配ID）：

var whole = d3.select("#canvas1"); 
var wholeCanvas = whole.append("svg").attr("width", 200).attr("height", 135); 
wholeCanvas.append("circle").attr("cx", 50) 
          .attr("cy", 50) 
          .attr("r", 40) 
          .on("click", function(d){ 
          $("#div1").show(); 
          }); 

var whole2 = d3.select("#canvas2"); 
var whole2Canvas = whole2.append("svg").attr("width", 200).attr("height", 135); 
whole2Canvas.append("circle").attr("cx", 50) 
          .attr("cy", 50) 
          .attr("r", 40) 
          .on("click", function(d){ 
          $("#div2").show(); 
          });

更新小提琴： https://jsfiddle.net/La6w0pxy/5/

JQuery/Javascript/d3'点击'功能不能按预期工作

相关推荐