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

Question

当我点击它时我有按钮，我想使用 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”传递时，我只想看到第二个段落。

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