Question

如何仅替换此按钮的文本。我不明白这个按钮的行为。这就是我提出的解决这个问题的所有代码

$('.for_whom .close').click(function(z) {
    
  if ($(this).hasClass('active')) {
    $('body .for .close').removeClass('active');
    $('body .for .close').text('No');

  } else {
    $(this).addClass('active');
    $('body .for .close').not(this).removeClass('active');
    $(this).text('Yes').css('margin-top', '30px');
  }				

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="for">
    <button class="close">No</button>
  </div>
  <div class="for">
    <button class="close">No</button>
  </div>
  <div class="for">
    <button class="close">No</button>
  </div>
  <div class="for">
    <button class="close">No</button>
  </div>
</body>

Answer 1

你走了： https://jsfiddle.net/sudakatux/dwqg4v00/

$(document).ready(function(){
    $('.close').click(function(z) {

            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $(this).text('No');

            } else {
                $(this).addClass('active');
                 $(this).text('Yes').css('margin-top', '30px');
            }               

        });
  })

如果我正确理解了这个问题，你想在是和否之间切换，

由于您只对按钮感兴趣，因此我稍微改变了您的电子电路。但是你走在正确的轨道上，所以你会得到这个想法。请注意，this关键字适用于您之前添加到该按钮的处理程序。意思是this用于单击的按钮。

希望有所帮助

Answer 2

首先，按钮元素的父div的类是.for，而不是.for_whom。这就是为什么你的代码什么都不做的原因。

您还可以使用toggleClass()使逻辑更简洁，并为text()提供一个函数，该函数读取所单击的按钮是否已具有.active类。试试这个：

var $buttons = $('.for .close').click(function(z) {
  $buttons.not(this).removeClass('active').text('No');
  $(this).text(function() {
    return $(this).hasClass('active') ? 'No' : 'Yes';
  }).toggleClass('active');
});

.active {
  margin-top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="for"><button class="close">No</button></div>
  <div class="for"><button class="close">No</button></div>
  <div class="for"><button class="close">No</button></div>
  <div class="for"><button class="close">No</button></div>
</body>

如何仅替换此按钮的文本

2 个答案: