Циклические операции на jquery

217

31 января 2018, 15:36

Есть кнопки. Как узнать,то это кнопка? В классе присутствует "knopka". Точное количество кнопок не известно. Возьму пример с двумя кнопками:

<a class="knopka btn"  data-knopka="222222222" onclick="">Закрыть</a> 
<div data-knopka="1111111" onclick="" class="knopka btn btn-danger">Выполнить действие</div>

Нужно выполнить код jquery который вставит данные из атрибута data-knopka в onclick, я пробовал таким кодом, но он вставляет во все кнопки одно и тоже "1111111"

$(".knopka").each(function() { 
  if ($(this).attr("data-knopka") != undefined) { 
    console.log($(this).attr("data-knopka")); 
    $(".knopka").attr("onclick", $(this).attr("data-knopka") + " return false;"); 
  } 
})

Спасибо!

Answer 1

$(".knopka").attr("onclick", $(this).attr("data-knopka") + " return false;");

тут вы всем элементам с классом knopka в атрибут data-knopka вставляете текущее значение, в итоге в конце вы вставите значение из последнего элемента.

Замените этот код на :

$(this).attr("onclick", $(this).attr("data-knopka") + " return false;");

$(".knopka").each(function() { 
  if ($(this).attr("data-knopka") != undefined) { 
    console.log($(this).attr("data-knopka")); 
    $(this).attr("onclick", $(this).attr("data-knopka") + " return false;"); 
  } 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a class="knopka btn" data-knopka="222222222" onclick="">Закрыть</a> 
<div data-knopka="1111111" onclick="" class="knopka btn btn-danger">Выполнить действие</div>

Answer 2

Большинство функций jQuery устанавливающих значение, могут принимать в качестве параметра функцию возвращающую новое значение и принимающее старое.

Функция attr не является исключением: .attr( attributeName, function ).

Код может принять следующий вид:

$(".knopka[data-knopka]").attr('onclick', function(index, oldValue) { 
  return $(this).attr("data-knopka") + " return false;"; 
});

[data-knopka]::after { 
  content: attr(onclick); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a class="knopka btn" data-knopka="222222222" onclick="">Закрыть </a> 
<div data-knopka="1111111" onclick="" class="knopka btn btn-danger">Выполнить действие </div>