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'});
    } 
});

Answer 2

您对$('.btn')而非$(this)进行了更改，这就是您更改所有按钮文字的原因。

尝试更改此内容：

$('.btn').text("SHOW");

要：

$(this).text("SHOW");

Answer 3

尝试使用以下内容：

$('.btn').click(function(){

        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 4

试试这个。

$('.btn').click(function () {
    var elm = $(this); //touch DOM once. she is too precious
    if (elm.text() == "HIDE") {
        elm.text("SHOW").next(".pre_hide").hide();
    } else {
        elm.text("HIDE").next(".pre_hide").show();
    }
});

小提琴：http://jsfiddle.net/codovations/TkTL9/1/

Answer 5

$('.btn', $(this)).text('SHOW');

或

$('.btn', $(this)).text('HIDE');

在一个按钮中更改文本

5 个答案: