Why html-element text doesn't replace?

Question

I use javascript (jQuery) to toggle text of html-element (span):

function TextToogle(element, text) {
   if (element.html() == '-' + text) {
       element.html(text.replace(element.html(), '+' + text));
   }
   else {
       element.html(text.replace(element.html(), '-' + text));
   }
}

I give two arguments for my function: 1) element - html Object 2) text - default text of span

My goal is toggle the span text from "+text" to "-text" and vice versa.

But script doesn't work correctly. When function toggle text to "+text", as result I see "text". The toggle to "-text" works correctly.

Rahul Desai, Yes, I can. I will attach link after 5 minutes. — Feel
– Feel, Commented Feb 27, 2014 at 11:36

adeneo · Accepted Answer · 2014-02-27 11:36:45Z

4

I would just replace inside a callback, seems so much simpler

element.text(function(_, txt) {
    return txt.replace(/[+-]/g, function(x) {
        return x == '+' ? '-' : '+';
    });
});

FIDDLE

answered Feb 27, 2014 at 11:36

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2014-02-27 11:49:56Z

3

Based on you is comparison (element.html() == '-' + text) your function can be simpler. You don't need text.replace(element.html(), '+' + text) part:

function TextToogle(element, text) {
   if (element.text() == '-' + text) {
       element.text('+' + text);
   }
   else {
       element.text('-' + text);
   }
}

However relying on text comparison is not ideal. I would use CSS which is not text dependent:

$('.text-toggle').click(function() {
    $(this).toggleClass('active');
});

CSS

.text-toggle:before {
    content: '+';
}
.text-toggle.active:before {
    content: '-';
}

There is obvious advantage here is that you can style your +/- easily, you can set a background image, chage font-size, etc. While you would'n be able this with your original approach.

Demo: http://jsfiddle.net/dfsq/mvj5c/

edited Feb 27, 2014 at 11:49

answered Feb 27, 2014 at 11:35

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

Feel Over a year ago

And you are first. Thanks.

Mukesh Soni · Accepted Answer · 2014-02-27 11:37:04Z

0

function toggleText(text) {
    return {'-':'+', '+':'-'}[text[0]]+text.slice(1);
}

element.html(toggleText(element.html()));

answered Feb 27, 2014 at 11:37

Mukesh Soni

6,6683 gold badges34 silver badges38 bronze badges

Comments

Bikas · Accepted Answer · 2014-02-27 11:38:48Z

0

See simple example.

You've text -abc. Now it's fail on both of the checks.

Why not do this

function TextToogle(element, text) {
   var check = text.splice(0, 1);
   if (check === "-") {
       element.html("+" + text.substring(1, text.length));
   }
   else {
       element.html("-" + text.substring(1, text.length));
   }
}

answered Feb 27, 2014 at 11:38

Bikas

2,76918 silver badges33 bronze badges

Comments

kp singh · Accepted Answer · 2014-02-27 11:38:59Z

0

try this code

$('span').click(function(){
  var 
     $this = $(this),
     thisText = $this.text();
  $this.text($this.text() === "-" + thisText ? ("+" + thisText) : ("-" + thisText));

});

answered Feb 27, 2014 at 11:38

kp singh

1,4609 silver badges22 bronze badges

Collectives™ on Stack Overflow

Why html-element text doesn't replace?

5 Answers 5

Comments

Demo: http://jsfiddle.net/dfsq/mvj5c/

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Demo: http://jsfiddle.net/dfsq/mvj5c/

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related