在一个按钮中更改文本

Question

我有几个内部具有相同文本的按钮 - 每个按钮在单击时打开包含div.问题是,我无法仅在单击的SINGLE按钮上进行文本更改 - 当我单击按钮时,文本会同时在所有按钮上更改.

有没有人知道如何仅在点击的按钮中更改文本？

这是我到目前为止的代码 - jQuery无法正常工作:

HTML

<div class="btn"> SHOW </div>
        <div class="pre_hide" style="background: blue">          
            <h5>BOX 1</h5>
        </div> <!-- END OF pre_hide -->       
<br>

<div class="btn"> SHOW </div>
        <div class="pre_hide" style="background: blue">          
            <h5>BOX 2</h5>
        </div> <!-- END OF pre_hide -->       
<br>

<div class="btn"> SHOW </div>
        <div class="pre_hide" style="background: blue">          
            <h5>BOX 3</h5>
        </div> <!-- END OF pre_hide -->

JQuery的

$('.btn').click(function(){
    if(event.target === this) { // THIS IS NOT WORKING !!
        if ($(this).text() == "HIDE") {  
            $('.btn').text("SHOW");
            $(this).next('.pre_hide').css({'display': 'none'});
        }
        else {  
            $('.btn').text("HIDE");
            $(this).next('.pre_hide').css({'display': 'block'});
        }
    } 
});

Answer 1

这应该工作:

$('.btn').click(function(){
    if ($(this).text() == "HIDE") {  
        $(this).text("SHOW");
        $(this).next('.pre_hide').css({'display': 'none'});
    }   
    else {  
        $(this).text("HIDE");
        $(this).next('.pre_hide').css({'display': 'block'});
    } 
});