javascript - 使用多个按钮渲染局部 View

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

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

改为使用类:

<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').on('click', function() {
   $('#partial').show();
});