Jquery：更改按钮及其兄弟的属性点击

Question

我有按钮的div。如果div是封面，按钮的文本是'封面'，并且它被禁用。其他按钮有文字'设置为封面'并启用。如果我点击其他按钮，它应该将其文本更改为“封面”并变为禁用状态。那个'封面'应该改为'设置为封面'并且被启用。

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

嫩枝

{% 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 %} 

此代码不能正常工作，页面重载应用了所有更改后，但是。

Answer 1

假设setCoverObject是一个事件处理程序，您需要将AJAX回调绑定到this值。所以：

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

如果它不是一个事件处理程序，然后找到您的按钮元素并将回调绑定到它。例如：

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

还设置你不应该使用该按钮的value属性应该设置按钮内容的按钮上的文字，所以不是

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

使用：

some_button.text('Set cover') 

Answer 2

我给某个按钮添加了id，并且使用了，而不是改变其他按钮。

success: function (data) { 
      $('.set_as_cover').not('#cover_button_'+objId).each(function(){ 
       $(this).prop('disabled', false); 
       $(this).text('Set cover'); 
      }); 
      $('#cover_button_'+objId).prop('disabled', true); 
      $('#cover_button_'+objId).text('Cover'); 
     }