Wie kann ich Eingabe-Tags verbergen oder anzeigen?

Question

Wie kann ich Eingabe-Tags ausblenden oder zeigen, wenn ich auf span-Tag klicke.

Ich möchte auf jedes der span-Tag klicken und anzeigen Tags anzeigen und ausblenden span-Tag im Zusammenhang mit dieser Zeile und andere Zeile nur zeigen span-Tag. andere Zeilen wie diese Zeile.

$(document).ready(function() { 
 
    var ID, tmp_ID, count, flag = 0; 
 
    $("tr").click(function() { 
 
    ID = $(this).attr('id'); 
 
    $("#s" + ID).hide(); 
 
    $("#num" + ID).show(); 
 
    $("#btn" + ID).show(); 
 
    }); 
 

 
    $("btn" + ID).click(function() { 
 
    $("#s" + ID).show(); 
 
    $("#num" + v).hide(); 
 
    $("#btn" + ID).hide(); 
 
    }); 
 
});

.num { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table" id="tableCompleted"> 
 
    <th>Name</th> 
 
    <tbody> 
 
    <tr id="1"> 
 
     <td class="noEdit"> 
 
     <span id="s1">1</span> 
 
     <div id="btn1" class="num">click me!</div> 
 
     <input type="number" id="num1" class="num" /> 
 
     </td> 
 
    </tr> 
 
    <tr id="2"> 
 
     <td> 
 
     <span id="s2">2</span> 
 
     <div id="btn2" class="num">click me!</div> 
 
     <input type="number" id="num2" class="num" /> 
 
     </td> 
 
    </tr> 
 
    <tr id="3"> 
 
     <td> 
 
     <span id="s3">3</span> 
 
     <div id="btn1" class="num">click me!</div> 
 
     <input type="number" id="num3" class="num" /> 
 
     </td> 
 
    </tr> 
 
    <tr id="4"> 
 
     <td> 
 
     <span id="s4">4</span> 
 
     <div> 
 
      <input id="btn4" class="num" type="submit" value="Release" /> 
 
     </div> 
 
     <input type="number" id="num4" class="num" /> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Vielen Dank für Ihre Antwort.

Answer 1

Ihre Frage ist wirklich schwer zu verstehen, aber was ich habe, ist, dass Sie die Eingabe in einer Zeile verbergen und anzeigen möchten, wenn Sie auf das Element der Zeilenspanne klicken.

Versuchen Sie, ein click -Ereignis an jeden Bereich zu binden, und greifen Sie auf den übergeordneten Bereich und dann auf die Eingabe zum Umschalten zu.

$('#tableCompleted span').each(function(){ 
    $(this).click(function(){ 
     $('#tableCompleted input').hide(); 
     $(this).parent().find('input').first().show(); 
    }); 
}); 

Dieser Code wird alle Eingabefelder in der Tabelle ausblenden und nur die Eingabe anzeigen, auf die das entsprechende span-Tag geklickt wurde.

Wenn Sie die Spanne in dieser Zeile ausblenden möchten, verwenden Sie diesen Code: http://jsfiddle.net/hy82ssy2/

Answer 2

Geben Sie jedem "BTN" eine Klasse, sagen Sie "Unter BTN", etwa so:

<div id = "btn1" class="num sub-btn">click me!</div> 

dann in Ihrem Code, tun Sie etwas wie folgt aus:

$(".sub-btn").click(function() 
    { 
     ID = $(this).attr('id').replace(/\D/gi,'');//removes all non-numeric character in id to get number 
     $("#s" + ID).show(); 
     $("#num" + ID).hide(); 
     $("#btn" + ID).hide(); 
    }); 

Hinweis: Sie haben 2-IDs mit btn1 in Ihrem Beispiel