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

Question

我有两个span ：

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

基本上，第一个span的链接在单击show链接时显示完整的数字，并隐藏自身。

单击“隐藏”后，我想再次使用显示链接和最后4位数字来恢复原来的状态。

任何人都可以帮助我，我陷入了这样一个简单的代码中：(？

Answer 1

您只需要这个就可以将您的html作为

<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>

然后使用Jquery

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

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

})

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

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

})

更新了动态创建的倍数跨度

   $("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();

})

这里更新的是小提琴工作演示http://jsfiddle.net/cs6t3g48/2/

Answer 2

您将从链接到jQuery开始，然后提供要隐藏ID的跨度。 它会像这样发生：

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

如果您想回应点击：

 $(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>

没有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";
           }
       }

使用JQuery：

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