Эффект toggle для названий и значений атрибутов

313

16 января 2017, 22:08

Здравствуйте.

Все знакомы с функцией .toggle() и .toggleClass(), которые изменяют местами стили и классы элемента:

$(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>

Но можно ли как-то заменить таким образом название или значение атрибута?
К примеру:

Есть элемент <div class="block" data-style="0"></div>, при нажатии на него, его значение атрибута data-style изменялось на 1 и при повторном нажатии снова на 0

Или:

Есть элемент <div class="block" data-style_0></div>, при нажатии на него, его название атрибута data-style_0 изменялось на data-style_1 и при повторном нажатии снова на data-style_0, но при этом если в нём есть какое-то значение, то оно оставалось неизменным

Кто реализовывал такое? Буду очень признателен, если поделитесь своими соображениями. Заранее спасибо.

Answer 1

На сколько мне известно, таких функций нет, но:

Если заморочиться, можно замутить свою функцию, которая будет выполнять такие действия. Но при этом будет выглядеть как обычная jQuery-функция:

//пишем функционал: 
$.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>

По названию аттрибута

//пишем функционал: 
$.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>

Answer 2

function dataToggle ($el) {
   $el.data('style', $el.data('style')
        ? '0' 
        : '1');
    }
dataToggle ($('.block'));

или

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

Не тестировал, но я бы сделал так

Answer 3

Можно написать функции:

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);
    }
}