jQuery更改我的文本

Question

I have following html code:

<span id="change_user_status_account-1">
    SIMPLE TEXT INSIDE SPAN
</span>

<span id="change_user_status_account-2">
    SIMPLE TEXT INSIDE SPAN
</span>

now with jQuery I want to change the text inside <span> tag. But my code doesn't work:

$('[id^="change_user_status_account-"]').click(function () {
    var id = $(this).attr('id').split('-');
    alert(id[1]);
    $("change_user_status_account-" + id[1]).html('OK CHANGED');
});

alert() in this code return 1 or 2 and I don't get any error on FireBug

Answer 1

Use $(this) . $(this) inside the event handler refers to the element on which the event has occurred.

$('[id^="change_user_status_account-"]').click(function () {
    $(this).text('changed');
});

I'd recommend to use a common class on both the elements and bind event using class.

 $('.sample').on('click', function() { $(this).text(+new Date()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <span class="sample"> SIMPLE TEXT INSIDE SPAN </span> <span class="sample"> SIMPLE TEXT INSIDE SPAN </span> 

Answer 2

you are missing # in selector

it should be

$("#change_user_status_account-" + id[1]).html('OK CHANGED');

or try

$('[id^="change_user_status_account-"]').click(function () {
    $(this).html('OK CHANGED');
});

Answer 3

Put a # before your id

$('[id^="change_user_status_account-"]').click(function () {
    var id = $(this).attr('id').split('-');
    alert(id[1]);
    $("#change_user_status_account-"+id[1]).html('OK CHANGED');
});

Or Just Do

$('[id^="change_user_status_account-"]').click(function () {
    $(this).html('OK CHANGED');
});