想要在HTML页面内使用jquery或javascript显示和隐藏数据

Question

I have two span s:

<span>Show link -3456
  <span>Hide link -n 1234 - 4567 -7777 -3456
  </span>
</span>

Basically first span 's link shows full number on click of show link and hides itself.

On click of hide I want to again regain the original state with show link and last 4 digits of number..

Could anyone please help me out I am stuck in such a simple code :( ?

Answer 1

You just simple need this have your html as

<table>
    <tr>
        <td>
<span class="show">Show link -3456</span>
<span class="hide" style="display:none">Hide link -n 1234 - 4567 -7777 -3456</span>
        </td>
    </tr>
<tr>
        <td>
<span class="show">Show link -3000</span>
<span class="hide" style="display:none">Hide link -n 1234 - 4567 -7777 -3456</span>
        </td>
    </tr>
</table>

And then using Jquery

$("span.show").on("click",function(){

     $(this).hide();
     $("span.hide").show();

})

$("span.hide").on("click",function(){

     $(this).hide();
     $("span.show").show();

})

Updated For dynamically created multiples spans

   $("table").on("click","span.show",function(){

     $(this).hide();
     $(this).siblings("span.hide").show();

})

$("table").on("click","span.hide",function(){

     $(this).hide();
     $(this).siblings("span.show").show();

})

Updated here is the fiddle working demo http://jsfiddle.net/cs6t3g48/2/

Answer 2

You would start by linking to jQuery, then you would give the span that you want to hide an id. It would happen like so:

 $(function(){ $('#idofthespan').hide(); }); 

And if you want to respond to a click:

 $(function(){ $("#target").click(function() { $("#idofthespan").show(); }); }); 

Answer 3

 <span id="shortInfo">
    <a href="#" onclick="ShowInfo(true)">Show link</a> -3456
 </span>
 <span id="longInfo" style="display:none">
    <a href="#" onclick="ShowInfo(false)">Hide link</a>  -n 1234 - 4567 -7777 -3456
 </span>

Without JQuery:

 var ShowInfo = function (showLong) {
           if (showLong) {
               document.getElementById("shortInfo").style.display = "none";
               document.getElementById("longInfo").style.display = "block";
           }
           else
           {
               document.getElementById("shortInfo").style.display = "block";
               document.getElementById("longInfo").style.display = "none";
           }
       }

With JQuery:

 var ShowInfo = function (showLong) {
               if (showLong) {
                   $("#shortInfo").hide();
                   $("#longInfo").show();
               }
               else
               {
                   $("#shortInfo").show();
                   $("#longInfo").hide();
               }
           }