Question

我有一个JS方法，根据按钮的状态而改变，由indexOf("..some text..")

定义

$('#add1').click(function(){
    if($(this).text().indexOf("Add Me!")) {
        $.ajax({
            type: 'post',
            url: '{{ URL('schedulizer/add') }}',
            data: {
                "class": ["Saab", "Volvo", "BMW"],
                _token: "{{ csrf_token() }}"
            },
            dataType: 'json'
        }).done(function(data){
            ... do stuff ...
        });
        $(this).removeClass('btn-material-yellow-600');
        $(this).addClass('btn-danger');
        $(this).text('Remove Me!');
        return false;
    } else if($(this).text().indexOf("Remove Me!")){
        $.ajax({
            type: 'post',
            url: '{{ URL('schedulizer/remove') }}',
            data: {
                "class": ["Saab", "Volvo", "BMW"],
                _token: "{{ csrf_token() }}"
            },
            dataType: 'json'
        }).done(function(data){
            ... do stuff ...
        });
        $(this).removeClass('btn-danger');
        $(this).addClass('btn-material-yellow-600');
        $(this).text('Add Me!');
        return false;
    }
});

什么有效：

当我点击最初的“添加我！”时，它将变为“删除我！”。但是，当按钮状态为“Remove Me！”时，似乎条件不满足，无论按下按钮多少次，状态都会保留在“Remove Me”中。

为凌乱和冗余的代码道歉......我对JS非常新，所以一切都是糟糕的事。

Answer 1

indexOf返回它找到的字符串的位置，并且你的字符串的位置使条件if / else混乱，并且它总是落在else if条件上。使用==运算符，如下所示：

$('#add1').click(function(){
  

    if($(this).text().trim() == "Add Me!") {
        
        $(this).text('Remove Me!');
        return false;
      
    } else if($(this).text().trim() == "Remove Me!"){
       
        $(this).text('Add Me!');
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add1">Add Me!</button>

Answer 2

indexOf()在条件中使用时需要进行比较，因为0是有效索引，但在条件中是假的。

使用greater than -1进行真正的测试，因为如果索引不存在，它将是-1

if($(this).text().indexOf("Add Me!") >-1)..

Answer 3

<强> HTML

<button id="add1">Add Me!</button>

<强>使用Javascript / Jquery的

$add1Btn = $('#add1');

$add1Btn.click(function() {
    var btnText = $add1Btn.html();
    console.log(btnText);

    if (btnText === 'Add Me!') {
            $add1Btn.html('Remove Me!');
    } else if (btnText === 'Remove Me!') {
            $add1Btn.html('Add Me!');
    }
});

http://jsfiddle.net/zymcm6jv/

如果某些内容似乎无法正常运行，您的AJAX调用可能会导致问题。另外，我认为您希望在AJAX调用的成功回调中更改文本，这样一旦收到响应，文本就会改变。

使用jQuery更改按钮文本和行为

3 个答案: