点击

Question

在触发ajax调用时，寻找一种在按钮内切换两个不同文本的正确方法。应该一次显示一个文本。

我遇到了一个问题，以及如何专门针对按钮内的跨度。我不能使用'this'的上下文，因为它总是引用单个跨度。

我想在ajax完成后，在其中一个跨度中添加一个类来隐藏它？

HTML

<button type="button" class="main-button" data-url={unfollowUrl}>
  <span class="text1">Text 1</span>
  <span class="text2">Text 2</span>
</button>

CSS

button {
  border: none;
  background-color: red;
  width: 100px;
  height: 50px;
}

button .hide-text {
  display: none;
}

JS

$('button').click(function{
  $.ajax({
    url: url,
    method: 'POST'
  }).done(function() {
    //toggling goes here

})
}

jsfiddle：https://jsfiddle.net/5rk99y6y/

Answer 1

HTML：

<button type="button" class="main-button" data-url={unfollowUrl}>
  <span class="text1">Text 1</span>
  <span class="text2 hide-text">Text 2</span>
</button>

JS：

$('button').click( function() {

    $curr = $(this);
    $.ajax({
        url: 'http://fiddle.jshell.net/',
        method: 'POST'
    }).done(function() {
        $curr.children('span').toggleClass('hide-text');
    });

});

CSS：

.hide-text {
  display: none;
}

Answer 2

看看这里：https://jsfiddle.net/5rk99y6y/1/

更新：https://jsfiddle.net/5rk99y6y/26/

只需将按钮内的跨栏文本更改为您想要的内容，然后根据需要进行更新：

HTML：

<button type="button" class="main-button" data-url={unfollowUrl}>
  <span>Text 1</span>
</button>

JS：

$('button').click(function(){
  var btn = $(this);
  var url = "/";
    $.ajax({
        url: url,
        method: 'POST'
      }).done(function() {
        var span = btn.find('span'),
            txt = span.text() ;
        if (txt == "Text 1") {
            span.text("Text 2");
        } else {
            span.text("Text 1");
        }
    });
});