Question

我想在点击多个按钮中的任意一个按钮时呈现部分<div>。

部分内容：

<div style="display:none;" id="partial">
    Some Partial content
</div>

按钮：

<button type="button" id="show-partial">Button1</button>
<button type="button" id="show-partial">Button2</button>
<button type="button" id="show-partial">Button3</button>

的javascript：

$('#show-partial').click(function(){
    $('#partial').show();
});

在此代码中，部分渲染仅在第一个按钮上单击，而在单击其他按钮时不渲染

Answer 1

不要多次使用相同的ID。

检查documentation

id属性指定HTML元素的唯一ID（值在HTML文档中必须是唯一的。）

而是使用类：

<button type="button" class="show-partial">Button1</button>
<button type="button" class="show-partial">Button2</button>
<button type="button" class="show-partial">Button3</button>

然后将click侦听器分配给该类：

$('.show-partial').on('click', function() {
   $('#partial').show();
});

Answer 2

每个元素应该unique id并非所有元素都有show-partial。你可以改为class喜欢

<button type="button" class="show-partial">Button1</button>
<button type="button" class="show-partial">Button2</button>
<button type="button" class="show-partial">Button3</button>  
$('.show-partial').click(function(){
    $('#partial').show();
});

单击任何一个按钮时会显示

$('#partial').show();为什么没有效果。

使用多个按钮渲染局部视图

2 个答案: