使用三元运算符切换按钮文本

Question

I am trying to toggle button text by using ternary operator but it is not working.

<button type="button" id="ter" >Bar</button>

$("#ter").click(function(){
   $(this).text() = 'Bar' ? 'column':'Bar';
});

Is this possible to do this way? and what part I am doing wrong? I know there many other ways to achieve this but I just need to know if it is possible in this method or not?

Answer 1

You could also try this:

$("#ter").click(function(){
    var newText = ($(this).text() == 'Bar') ? 'column':'Bar';
    $(this).text(newText);
});

This checks if the current text is equal to 'Bar' with $(this).text() == 'Bar' . If it is, it sets the variable newText to 'column' (or vice versa). The second line replaces the old text with the new text.

Answer 2

You are using the ternary operator wrong. It goes:

[statement] ? [code when true] : [code when false]

You're basically testing if('Bar') right now which will always return true.

Answer 3

You're doing it wrong, you could instead use this approach:

$("#ter").click(function(){
   $(this).text(function (i, t) {
       return t === 'Bar' ? 'column':'Bar';
   });
});

The reason it didn't work is because:

1. You were trying to assign a result to $(this).text() (using = ) instead of comparing ( == or === ), and
2. Not returning anything to update the text

It's important to note that with jQuery the text() method (and most others) when called with no arguments is a getter (it gets the current value), but to use it as a setter you have to pass an argument, either directly ( $(this).text('foo') ) or using the anonymous function ( $(this).text(function(){ return 'foo'; }) ). Calling the getter, and comparing that retrieved value (or trying to assign to it) does not act as a setter.

In the anonymous functions available to jQuery methods, the first argument (here called i , but the name is irrelevant, it's always the first argument) is the index of the current ' $(this) ' object in the collection returned by jQuery, the second argument (here called t , but again the name is irrelevant) represents the current (pre-manipulation) value found by the method.

References:

• text() .