Question

我有很多按钮，它们具有相同的类但每个都有不同的ID。在每个$ data元素旁边添加以下html按钮。

#!/usr/bin/python
import boto3
s3=boto3.client('s3')
list=s3.list_objects(Bucket='bucket')['Contents']
for s3_key in list:
    s3_object = s3_key['Key']
    if not s3_object.endswith("/"):
        s3.download_file('bucket', s3_object, s3_object)
    else:
        import os
        if not os.path.exists(s3_object):
            os.makedirs(s3_object)

现在我想基于单击按钮来更改单个按钮的文本。即如果单击一个按钮并且文本“推广到主页”，则其文本应更改为“从主页中删除”，反之亦然。我使用以下jquery代码来执行此操作。

<button name="toHomepageButton" id = "<?php echo $data->id ?>" class="frontpage"><?php if ($data->isChecked == 1) echo "Remove from homepage"; else echo "Promote to homepage" ; ?> </button>

现在此代码有效但仅在第二次点击时。即当我点击促销到主页按钮时，它的文本不会改变，但是如果我再次单击它，则文本会改变。我究竟做错了什么？请帮忙。

Answer 1

当您从PHP

回显时，看起来可能会添加额外的间距

尝试

<button name="toHomepageButton" id = "<?php echo $data->id ?>" class="frontpage"><?php if ($data->isChecked == 1) echo "Remove from homepage"; else echo "Promote to homepage" ; ?></button>

注意回声后删除的空格。这意味着$("#"+id).html() == "Promote to homepage"永远不会真实，$("#"+id).html() == "Promote to homepage "将是

Answer 2

在这种情况下，您应该使用text()代替html()，因为它有简单的文字。照顾空间。在比较值之前使用$.trim。试试 -

$('.frontpage').on('click', function() {
    var $this = $(this);
    var text = ($.trim($this.text()) == "Promote to homepage") ? "Remove from homepage" : "Promote to homepage";
    $this.text(text);
});

FIDDLE

Answer 3

将所有功能包裹在dom ready事件中。

$(function () {
    $('.frontpage').on('click', function () {
        var curTxt = $(this).text() == "Promote to homepage" ? "Remove from homepage" : "Promote to homepage";
        $(this).text(curTxt)
    });
})

Answer 4

这应该适合你。

$('.frontpage').on('click', function() {

    if ($.trim($(this).text()) === 'Promote to homepage') {
        $(this).text('Remove from homepage');
    }

    else if ($.trim($(this).text()) === 'Remove from homepage') {
        $(this).text('Promote to homepage');        
    }
});

jquery - 单击时更改按钮的文本仅在第二次单击时起作用

4 个答案: