Question

我有两个span s：

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

基本上，首先span的链接会在点击展示链接时显示完整数字并隐藏自己。

点击隐藏我想再次恢复原始状态，显示链接和最后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的范围。会发生这样的事情：

＆＃13;

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

＆＃13;

如果您想回复点击：

＆＃13;

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

＆＃13;

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();
               }
           }

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

3 个答案: