Question

我有以下HTML代码：

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

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

现在使用jQuery我想更改<span>标记内的文本。但我的代码不起作用：

$('[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()返回1或2，我在FireBug上没有任何错误

Answer 1

使用$(this)。事件处理程序内的$(this)引用发生事件的元素。

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

我建议在两个元素上使用公共类，并使用类绑定事件。

$('.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

您在选择器中缺少#

应该是

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

或尝试

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

Answer 3

在#

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

或者只做

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

jQuery更改了我的<span>中的文本

3 个答案: