jQuery toggle attribute value

Question

I want to toggle all element attributes with:

$('[contenteditable]').prop('contenteditable', !$(this).prop('contenteditable'));

It does only toggle to true the first time but not to false the second time. What is wrong?

it wont because 'this' is not refered to the desired object

Anoop Joshi P
– Anoop Joshi P

2014-10-13 12:36:31 +00:00
Commented Oct 13, 2014 at 12:36 — Anoop Joshi P
– Anoop Joshi P, Commented Oct 13, 2014 at 12:36
possible duplicate stackoverflow.com/questions/23170987/…

Artūras
– Artūras

2014-10-13 12:46:36 +00:00
Commented Oct 13, 2014 at 12:46 — Artūras
– Artūras, Commented Oct 13, 2014 at 12:46
I provided fiddle in answer jsfiddle.net/ws4n4nqd/3

Pratik Joshi
– Pratik Joshi

2014-10-13 12:49:10 +00:00
Commented Oct 13, 2014 at 12:49 — Pratik Joshi
– Pratik Joshi, Commented Oct 13, 2014 at 12:49

Pratik Joshi · Accepted Answer · 2014-10-13 13:36:21Z

8

UPDATED FIDDLE

As mentioned : it returns string so workaround is possible using ternary operator: One line solution

$('#contenteditable1').attr('contenteditable',$(this).attr('contenteditable')==='true'?'false':'true' );

Old=>

$('#contenteditable1').click(function()
   {
       if($('#contenteditable1').attr('contenteditable')==='true'){
           //alert("true");
           $('#contenteditable1').attr('contenteditable','false');
       }
       else{
            $('#contenteditable1').attr('contenteditable','true');           
       }
   });

edited Oct 13, 2014 at 13:36

answered Oct 13, 2014 at 12:48

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

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

3 Comments

daniel Over a year ago

is there no way not using the if switch?

daniel Over a year ago

I wanted a one line solution so i use now:

$('[contenteditable]').attr('contenteditable') === 'true' ? $('[contenteditable]').attr('contenteditable', 'false') : $('[contenteditable]').attr('contenteditable', 'true');;

Pratik Joshi Over a year ago

You could use ternary operator condition?expr1:expr2;' But it would consiter true` Value here you get it as string so , you need to work around it a little to check for "true" in ternary.

Pranav C Balan · Accepted Answer · 2014-10-13 13:33:28Z

7

Use callback function with prop()

$('button').click(function() {
  $('#contenteditable1').prop('contenteditable', function(i, val) {
    return val == "false" ? true : false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contenteditable1">hiu</div>
<button>click</button>

edited Oct 13, 2014 at 13:33

answered Oct 13, 2014 at 12:36

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

2 Comments

Anton Over a year ago

val returns a string "false" use return val=="false"?true:false; instead jsfiddle.net/ws4n4nqd/6

Pratik Joshi Over a year ago

@PranavCBalan , please check my solution also.

Joel Jeske · Accepted Answer · 2014-10-13 12:38:27Z

0

The variable "this" only refers to the context of the function block. you must change to selecting all the elements and using a forEach to toggle all the values.

answered Oct 13, 2014 at 12:38

Joel Jeske

1,64714 silver badges17 bronze badges

Comments

Atilla Baspinar · Accepted Answer · 2018-03-27 08:28:10Z

In case attribute has multiple values I use this code to toggle a value in all attribute values:

// jquery toggle just the attribute value
$.fn.toggleAttributeVal = function (attr, val) {
    var valArray =  $(this).attr(attr).split(" ");
    var elementIndex = valArray.indexOf(val);
    if (elementIndex >= 0) {
        valArray.splice(elementIndex, 1);
    }
    else {
        valArray.splice(-1, 0, val);
    }
    $(this).attr(attr, valArray.join(" "));
    return this;
};

example usage (for using Font Awesome 5 JS version):

// jquery toggle just the attribute value
$.fn.toggleAttributeVal = function(attr, val) {
  var valArray = $(this).attr(attr).split(" ");
  var elementIndex = valArray.indexOf(val);
  if (elementIndex >= 0) {
    valArray.splice(elementIndex, 1);
  } else {
    valArray.splice(-1, 0, val);
  }
  $(this).attr(attr, valArray.join(" "));
  return this;
};

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#icon3 .fa-cog").toggleAttributeVal("data-fa-transform", "right-2");
  });
});

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="fa-3x" id="icon3">
      <span class="fa-layers fa-fw">
                <i class="far fa-circle" data-fa-transform="grow-1"></i>
                <i class="fas fa-cog" data-fa-transform="shrink-9 up-2 right-2"></i>
                <i class="fas fa-arrow-left" data-fa-transform="shrink-9 down-2 left-2"></i>
            </span>
    </div>
    <div class="row">
      <div class="col">
        <button class="btn btn-primary" id="btn1">toggle Attribute</button>
      </div>
    </div>
</body>

</div>

Collectives™ on Stack Overflow

jQuery toggle attribute value

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related