Hello.

Everyone is familiar with the .toggle() and .toggleClass() functions that swap styles and element classes:

 $(function() { $('.block').click(function() { $(this).toggleClass('block_new-style'); }); }); 
 .block {width: 200px; height: 200px; background-color: red} .block.block_new-style {background-color: green} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block"></div>

But is it possible to somehow replace the attribute name or value in this way?
For example:

There is an element <div class="block" data-style="0"></div> , when you click on it, its value of the data-style attribute is changed to 1 and when it is pressed again to 0

Or:

There is an element <div class="block" data-style_0></div> , when you click on it, its name attribute data-style_0 changed to data-style_1 and when you click again on data-style_0 , but if it is there is some value, then it remained unchanged

Who implemented it? I would be very grateful if you share your thoughts. Thank you in advance.

  • Is it possible to somehow replace in this way - so what is it? Using toggle and toggleClass ? or by writing your own function? - Grundy
  • @Grundy, writing your own. Under "this way" I had to enter, so that when I press it again, the value will return - Yuri
  • toggle and toggleClass work with only two possible values: true / false. How do you want to determine which values ​​to use for attributes? That is, why the data-style="0" should be replaced by data-style="1" ? is this the only possible case? or values ​​in individual cases may differ? - Grundy
  • @Grundy, let's say I create a function and specify toggleAttr('название атрибута', 'значение1', 'значение2') toggleAttr('название атрибута', 'значение1', 'значение2') - Yuri
  • The data-style_0 doesn’t fall under this call data-style_0 When you click on it, its data-style_0 attribute name is changed to data-style_1 - what will you transfer the name as a parameter and what values? - Grundy

3 answers 3

As far as I know, there are no such functions, but:

If you get stuck, you can muddle your function, which will perform such actions. But at the same time it will look like a regular jQuery-function:

 //пишем функционал: $.fn.toggleAttr = function(name,value1,value2) { this.attr(name, this.attr(name) == value1 ? value2 : value1); return this; }; //тестируем: $('div').click(function() { $(this).toggleAttr('title','Первый','Второй') }) 
 div { width: 50px; height: 50px; background: #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div title='Не установлен'></div>

By attribute name

 //пишем функционал: $.fn.toggleAttrName = function(name1,name2) { if(this.is('['+name1+']')){ this.attr(name2,this.attr(name1)).removeAttr(name1) }else{ this.attr(name1,this.attr(name2)).removeAttr(name2) } return this; }; //тестируем: $('div').click(function() { $(this).toggleAttrName('data-attr-0','data-attr-1') }) 
 div { width: 50px; height: 50px; background: #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-attr-0='значение'></div>

  • one
    the data function does not change the attribute value - Grundy
  • @Grundy click execute code to make sure it works - Crantisz
  • one
    The attribute wants to change the author of the question, and at the moment the answer cannot cope with this task. - Grundy
  • one
    It doesn't matter who writes. The main that the answer began to answer the question - Grundy
  • one
    @Yuri, I would like to see the rest are correct . And what's the point of taking one answer if you know a few more? Add your answer with good explanations. So far, both the question and the answers are somewhat useless. - Grundy
 function dataToggle ($el) { $el.data('style', $el.data('style') ? '0' : '1'); } dataToggle ($('.block'));

or

 $('.block').on('click', dataToggle($(this)))

Not tested, but I would do it

  • one
    You can decide if you can attr or data ... - Pavel Mayorov
  • The data function does not change the value of the attribute - Grundy
  • @Grundy learn mate part, change api.jquery.com/jquery.data/#data1 - Goshka Tarasov
  • @GoshkaTarasov specify more precisely where it is written there. - Pavel Mayorov
  • @ GoshkaTarasov, materiel, this is of course good, especially if it were written in it that the attribute value changes. In fact, the attribute value is used only during the first reading. Otherwise, the values ​​are stored in the internal object and there is no access to the dom. This can be seen in the implementation of the data function - Grundy

You can write functions:

 function toggleDataAttr (el, name, firstValue, secondValue) { if (el.data(name) === firstValue) { el.data(name, secondValue); } else { el.data(name, firstValue); } } function toggleAttr (el, name, firstValue, secondValue) { if (el.attr(name) === firstValue) { el.attr(name, secondValue); } else { el.attr(name, firstValue); } }
  • and how to use these functions? What do the parameters mean? What can be transferred to these parameters? - Grundy
  • The data function does not change the value of the attribute - Grundy
  • Sorry, but your function does not change the name of the attribute, it creates a new attribute with a new name - Yuri
  • Please try to write more detailed answers. I am sure the author of the question would be grateful for your expert commentary on the code above. - Nicolas Chabanovsky ♦