基于 ID 的可见段落 [重复]

Posted 2023-03-06

【中文标题】基于 ID 的可见段落 [重复]

【英文标题】：Visible paragraph based on ID [duplicate]

【发布时间】：2020-06-27 13:39:41

【问题描述】：

当我点击它时我有按钮，我想使用 jquery CSS 函数显示段落。默认情况下，段落处于隐藏模式。

<script>
$(document).ready(function()
  $("button").click(function()
     $("p").css("visibility: visible");
  );
);
</script>

<p style="visibility: hidden;" id="P1">This is a paragraph1.</p>
<p style="visibility: hidden;" id="p2">This is a paragraph2.</p>
<p style="visibility: hidden;" id="P3">This is a paragrap3.</p>

<button>Click To show</button>

但这不起作用我有兴趣传递值并基于我想要显示特定段落的值。

var v=p2;

所以当我点击按钮并将值作为“p2”传递时，我只想看到第二个段落。

【问题讨论】：

你到底是如何传递值的？

你打错了：.css("visibility", "visible")

【参考方案1】：

您可以通过 3 种方式做到这一点：-

第一种方式：

function show(paragrapId) 
console.log(paragrapId);
  $("#"+paragrapId).css("visibility","visible"); //or can do .css("visibility : visible");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="visibility: hidden;" id="P1">This is a paragraph1.</p>
<p style="visibility: hidden;" id="p2">This is a paragraph2.</p>
<p style="visibility: hidden;" id="P3">This is a paragrap3.</p>

<button onclick="show('P1');">Click To show</button>

第二种方式：

$(document).ready(function() 
  $("button").click(function() 
    show('p2');
  );
);

function show(paraID) 
  $('#' + paraID).css("visibility", "visible");//or can do .css("visibility : visible");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="visibility: hidden;" id="P1">This is a paragraph1.</p>
<p style="visibility: hidden;" id="p2">This is a paragraph2.</p>
<p style="visibility: hidden;" id="P3">This is a paragrap3.</p>

<button>Click To show</button>

第三种方式（但id's 必须是小写或大写）：

$(document).ready(function() 
  $("button").click(function() 
    var id = randomIntFromInterval(1, 3);
    show('p' + id);
  );
);

function show(paraID) 
  $('#' + paraID).css('visibility', 'visible');


function randomIntFromInterval(min, max)  // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="visibility: hidden;" id="p1">This is a paragraph1.</p>
<p style="visibility: hidden;" id="p2">This is a paragraph2.</p>
<p style="visibility: hidden;" id="p3">This is a paragrap3.</p>

<button>Click To show</button>

【讨论】：

感谢您的回复

@FresherProgrammer 很高兴为您提供帮助.. 编码愉快..:)