Javascript any click a value for multiple instances

Question

我有一个骨骼的 SVG 合成图像，我想要的是，只要你点击骨骼，它就会改变颜色，文本字段会得到一个特定的值：基本上在第一次点击时，骨骼的填充变成黑色并且文本字段得到 "black"，第二次单击 "red"，等等 206 根骨头！

我制作了一个脚本，它对第一个骨骼非常有效，但似乎如果我开始单击第二个骨骼，脚本会继续上一个实例的例程。

这是代码（只有肱骨和股骨起作用）：

<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1761">
    <defs>
      <style>
        svg {
          background-image: url(https://www.archeodb.it/scheletrino/skel.jpg);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          max-width: 900px;
          width: 90%;
        }
        path {
          fill: transparent;
          cursor: pointer;
          transition: fill 0.2s
        }
      </style>
    </defs>
    <g>
      <path href="#" alt="Femore destro" id="Femore_sx" d="M1032 997c-1-1-11-6-12-8a12 12 0 0 1-3-7c0-3 2-4 3-6s2-4 6-5 1-2 6-1 4 1 7 3l6 5 8 4c3 1 1-1 6-1l11 1c0 1 2 1 3 5s3 5 3 10 2 6-2 9-5 4-7 9-3 5-3 9l-4 24-23 139 1 36 7 26c0 1-1 5-3 6s1 2-3 3-3 1-6 0l-3-1-7-3-5-1c-2 0-6 2-10 1s-5 1-6-3-2-2-2-7-2-3 1-9l5-9c2-1 4-5 5-8a74 74 0 0 0 4-13l2-12 21-126c1-3 3-28 2-31l-6-9a12 12 0 0 1 0-5v-10-9a52 52 0 0 0-2-6z"/>
    </g>
    <g>
      <path href="#" alt="Femore sinistro" id="Femore_dx" d="M764 987s9-2 10-4v-7-5l-10-6s-4-2-6 0l-3 2-6 5c-3 2 1 1-3 2s-4 4-6 3l-5-1-4-2c-2-1-1-1-6 1-5 3-2-2-6 5s-3 2-4 7-3 11-2 13l6 10 4 14a3006 3006 0 0 1 28 132v30c1 5-1 2 2 11s3 10 3 16-2 8-2 10l-1 2-1 4c-2 4-2 2-2 9s-1 8 1 10-4 0 3 1l8 2h4l11-4h11c5-7 5-7 5-11s2-4 0-7 0-3-3-5-5-8-6-9-10-19-11-23l-1-27-11-45-8-46-4-33a43 43 0 0 1 2-10c4-9 1-8 4-14 1-2-1-15 2-17a7 7 0 0 0 2-5 8 8 0 0 1 2-3z"/>
    </g>
    <g>
      <path href="#" alt="Omero sinistro" id="Omero_dx" d="M703 605l3-7c0-2-3-10-5-11l-6-3a14 14 0 0 0-7 1c-2 1-5 0-8 2l-4 4-3 5s-1 10 0 12 0 7 3 11 3 22 3 30l4 40c1 6 1 17-1 25s-3 32-4 37-3 17-6 20l-6 7c-1 2-3 3-3 7s-2 6-1 8 3 4 5 4l10 5 9 2c2 0 0 3 3 0s6-5 9-6 9-1 8-3l-3-5c-2-3-10-21-10-24l-1-23 3-34 1-51-1-24v-13l3-10z"/>
    </g>
    <g>
      <path href="#" alt="Omero destro" id="Omero_sx" d="M1100 613v-10c0-3 1-3 3-4l4-2 5-2a18 18 0 0 0 4 0h4l8 2c1 0 3-1 3 3s2 1 0 7l-1 5-2 4c-3 5-6 6-6 8v5l1 17c0 5-2 47-4 53s-3 10-3 15v15l2 18 7 25 10 23c1 2 3 3 0 4l-7 2-11 3-6 3c-2 2-2 3-5 2s-3 0-6-2l-8-6v-4c-1-2 4-6 5-10l3-14 1-13-1-14 1-23 4-55v-20-19l-2-8-3-8z"/>
    </g>
</svg>


<p>OMERO DESTRO: <input type="text" id="Omero_dx_txt" value="1"></p>
<p>OMERO SINISTRO: <input type="text" id="Omero_sx_txt" value="1"></p>
<p>FEMORE DESTRO: <input type="text" id="Femore_dx_txt" value="1"></p>
<p>FEMORE SINISTRO: <input type="text" id="Femore_sx_txt" value="1"></p>

<script>

//QUESTE SONO LE FUNZIONI JS CHE HO CREATO E CHE PERMETTONO DI EVIDENZIARE CON COLORI DIVERSI AD OGNI CLIC L'OSSO SELEZIONATO E CONTESTUALMENTE POPOLA I CAMPI DI TESTO CORRELATI. IL PROBLEMA E' CHE SE CLICCO SU UN OSSO DOPO AVER CLICCATO SU UN ALTRO, MI VA AVANTI LA FUNZIONE PRECEDENTEMENTE ATTIVATA!

//Femore destro
var count = 0
$("#Femore_sx").click(function() {
    count++;
    if(count == 1) {
    $('#Femore_sx').on("click", function() { $('#Femore_sx').css({ fill: "#ff0000" });});
        $('#Femore_sx_txt').val('TRASPARENTE');
    }else if(count == 2){
    $('#Femore_sx').on("click", function() { $('#Femore_sx').css({ fill: "#ffffff" });});
        $('#Femore_sx_txt').val('ROSSO');
    }else if(count == 3){
    $('#Femore_sx').on("click", function() { $('#Femore_sx').css({ fill: "#000000" });});
        $('#Femore_sx_txt').val('BIANCO');
    }else if(count == 4){
    $('#Femore_sx').on("click", function() { $('#Femore_sx').css({ fill: "" });});
        $('#Femore_sx_txt').val('NERO');
        count = 0;
    }    
})

//Femore sinistro
var count = 0
$("#Femore_dx").click(function() {
    count++;
    if(count == 1) {
    $('#Femore_dx').on("click", function() { $('#Femore_dx').css({ fill: "#ff0000" });});
        $('#Femore_dx_txt').val('TRASPARENTE');
    }else if(count == 2){
    $('#Femore_dx').on("click", function() { $('#Femore_dx').css({ fill: "#ffffff" });});
        $('#Femore_dx_txt').val('ROSSO');
    }else if(count == 3){
    $('#Femore_dx').on("click", function() { $('#Femore_dx').css({ fill: "#000000" });});
        $('#Femore_dx_txt').val('BIANCO');
    }else if(count == 4){
    $('#Femore_dx').on("click", function() { $('#Femore_dx').css({ fill: "" });});
        $('#Femore_dx_txt').val('NERO');
        count = 0;
    }    
})

//Omero destro
var count = 0
$("#Omero_sx").click(function() {
    count++;
    if(count == 1) {
    $('#Omero_sx').on("click", function() { $('#Omero_sx').css({ fill: "#ff0000" });});
        $('#Omero_sx_txt').val('TRASPARENTE');
    }else if(count == 2){
    $('#Omero_sx').on("click", function() { $('#Omero_sx').css({ fill: "#ffffff" });});
        $('#Omero_sx_txt').val('ROSSO');
    }else if(count == 3){
    $('#Omero_sx').on("click", function() { $('#Omero_sx').css({ fill: "#000000" });});
        $('#Omero_sx_txt').val('BIANCO');
    }else if(count == 4){
    $('#Omero_sx').on("click", function() { $('#Omero_sx').css({ fill: "" });});
        $('#Omero_sx_txt').val('NERO');
        count = 0;
    }    
})

//Omero sinistro
var count = 0
$("#Omero_dx").click(function() {
    count++;
    if(count == 1) {
    $('#Omero_dx').on("click", function() { $('#Omero_dx').css({ fill: "#ff0000" });});
        $('#Omero_dx_txt').val('TRASPARENTE');
    }else if(count == 2){
    $('#Omero_dx').on("click", function() { $('#Omero_dx').css({ fill: "#ffffff" });});
        $('#Omero_dx_txt').val('ROSSO');
    }else if(count == 3){
    $('#Omero_dx').on("click", function() { $('#Omero_dx').css({ fill: "#000000" });});
        $('#Omero_dx_txt').val('BIANCO');
    }else if(count == 4){
    $('#Omero_dx').on("click", function() { $('#Omero_dx').css({ fill: "" });});
        $('#Omero_dx_txt').val('NERO');
        count = 0;
    }    
})

</script>
  </body>
</html>

Answer 1

您需要一个更通用的解决方案，对所有骨骼执行相同的操作。为此，select 按标签，而不是 ID。对所有细分使用相同的 "count" 变量是您问题的一部分。每个元素的状态都需要一个...所以我的解决方案只是将计数器状态隐藏到每个元素本身中。

点击函数里面$(this)引用了当前元素，所以不需要处理所有的身份证。下面的解决方案将一次性适用于整个图表。

var fills = [];
fills[1] = "#f00";
fills[2] = "#000";
fills[3] = "#fff";
fills[4] = "";
var labels = [];
labels[1] = "TRASPARENTE";
labels[2] = "ROSSO";
labels[3] = "BIANCO";
labels[4] = "NERO";
$("path").click(function() {
    var count = $(this).data("state") || 0; // get the counter, if none, use zero
    count++;
    $(this).css({ fill: fills[count] })
    // set labels
    var myText = $(this).attr("id")+"_txt"; // get the id of the associated text field
    $("#"+myText).val(labels[count]);

    if(count == 4) {
      count = 0;
    }

    $(this).data("state", count); // assign the counter back to the element
})

Javascript any click a value for multiple instances

Javascript any click a value for multiple instances

javascript

arrays

svg

subroutine