javascript - Jquery:单击时更改按钮及其同级按钮的属性

标签 javascript jquery html symfony

我有带按钮的 div。如果 div 为 cover,则按钮的文本为“Cover”并且被禁用。其他按钮具有文本“设置为封面”并且已启用。如果我单击其他按钮,它应该将其文本更改为“封面”并被禁用。 “封面”应更改为“设置为封面”并启用。

JavaScript

function setCoverObject(id) {
    var url = "{{ path('collection_set_cover', {'id' : id}) }}";
    $.ajax({
        url: url,
        success: function (data) {
           $(this).prop('disabled', true);
            $(this).attr('value', 'Cover');
            $(this).siblings('.set_as_cover').prop('disabled', false);
            $(this).siblings('.set_as_cover').attr('value', 'Set cover');
        }
    });
}

Twig

{% for object in collection.objects %}
<div class="object">
<button id="cover_button_{{ object.id }}"class="set_as_cover"
                       onclick="setCoverObject('{{ object.id }}'); return false;">
                        Set cover
                    </button>
</div>
{% endfor %}

此代码不起作用,但是在页面重新加载后,所有更改都会应用。

最佳答案

假设setCoverObject是一个事件处理程序,您需要将AJAX回调绑定(bind)到this值。所以:

success: function (data) {
  ...
}.bind(this)

如果它不是事件处理程序,则找到您的按钮元素并将回调绑定(bind)到它。例如:

var button = $("#id-of-your-button").get(0)
success: function (data) {
  ...
}.bind(button)

此外,要设置按钮文本,您不应该使用按钮的值属性,您应该设置按钮内容,因此而不是

some_button.attr('value', 'Set cover') 

用途:

some_button.text('Set cover')

关于javascript - Jquery:单击时更改按钮及其同级按钮的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33809332/

相关文章:

javascript - 函数变量未正确传递给 setState

javascript - 使用 Node : protocol when importing Node. js 内置模块时如何修复 eslint 错误

jquery.Countdown 样式问题

javascript - "lock"wysiHTML5 中的一部分 HTML

javascript - onmousemove 事件未触发

javascript - 如何使用 Javascript 从组合框获取数据并将其输入到文本框?

javascript - 使用 jQuery.map 修改对象?

javascript - 使用 AJAX + Javascript 分块读取文件

jquery - jQuery .hover() 和 $(window).resize() 的奇怪行为

javascript - 如何使用javascript根据递归对象中的一个键查找树级别