JQuery/Javascript/d3'點擊'功能不能按預期工作

-2

因此，基本上我有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語句來完成下面的註釋嗎？

預先感謝您！

來源

2016-02-12 nicki

所以，我想我錯了。以下兩種方法爲我工作：第一（通過分配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/

來源

2016-02-13 18:37:01 nicki

JQuery/Javascript/d3'點擊'功能不能按預期工作

回答

相關問題