Question

我有一个html页面，我想在按钮点击时显示和隐藏内容。

HTML：

<div class="wpb_wrapper">

  <p>
    <button class="learn-more">Learn More</button>
    <button class="learn-more">Learn More</button>
    <button class="learn-more">Learn More</button>
    <button class="learn-more">Learn More</button>
 </p>

<p class="hide_paragraph" id="p1" style="display: none;">First paragraph</p>
<p class="hide_paragraph" id="p2" style="display: none;">Second paragraph</p>
<p class="hide_paragraph" id="p3" style="display: none;">Third paragraph</p>
<p class="hide_paragraph" id="p4" style="display: none;">Fourth paragraph</p>

        </div>

也是我的功能

$(document).ready(function () {
$('.wpb_wrapper p .learn-more').click(function(){

    $('.wpb_wrapper p .hide_paragraph').hide();
    $('#' + $(this).attr('paragraph_id')).show();

});

});

但它不起作用

Answer 1

按钮标记中没有名为paragraph_id的属性，因此$(this).attr('paragraph_id')会返回undefined。由于paragraph_id不是标准的HTML属性，我建议不要简单地添加它。相反，只需向每个按钮添加一个数据属性，如下所示：

<button class="learn-more" data-paragraph-id="#p1">Learn More</button>

并在您的处理程序中使用$(this).data('paragraph-id')来标识要显示的段落。

请注意，哈希符号已包含在内，因此您不必再使用字符串连接。只需致电：

$($(this).data('paragraph-id')).show();

Answer 2

$(document).ready(function () {
 $('elem').click(function(){
  var getIndex = $('elem').index(this);
  $('elem2').hide();
  $('elem2:eq"' + getIndex + '"').show();
 });
});

应该有效，希望它正是你想要的：）

在点击时显示和隐藏内容

2 个答案: