Изменение tagName с запуском последующих функций

367
18 января 2017, 02:02

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

Написал функцию, которая изменяет tagName элемента. Всё работает отлично, но не задача! Все остальные функции, которые идут после этой, не работают. А если указать до функции замены tagName, то всё хорошо.

В общем, код с проблемой:

function tagName(elem, tagName) { 
  $(elem).replaceWith(elem.outerHTML.replace(/^\<[^ ]+(.*)\<\/[^ ]+\>$/, '<'+tagName+'$1</'+tagName+'>')); 
}; 
 
$(function() { 
  $(document).on('click', '.block', function() { 
    tagName(this, 'span'); 
    $(this).css('background', 'black'); // А это где? Фон остался белым! 
  }); 
});
.block { 
  display: block; 
  width: 200px; 
  height: 200px; 
} 
div.block {border: 2px solid red} 
span.block {border: 2px solid blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"></div>

Может кто знает способ получше, как заменить tagName без этой "ошибки"? Заранее благодарю.

Answer 1

В данном случае функция не меняет tagName, а удаляет старый элемент и добавляет новый. Таким образом в разметке уже не старый элемент, на который ссылается this, а новый созданный, поэтому последующее применение к this

$(this).css('background', 'black');

Не приносит результат.

Это поведение изменить невозможно, так как, невозможно изменить значение на которое будет ссылаться this внутри функции.

В качестве обходного пути, стиль должен применяться к новому созданному элементу, для этого его нужно вернуть из функции tagName

Пример:

function tagName(elem, tagName) { 
  var el = $(elem.outerHTML.replace(/^\<[^ ]+(.*)\<\/[^ ]+\>$/, '<' + tagName + '$1</' + tagName + '>')); 
  $(elem).replaceWith(el); 
  return el; 
}; 
 
$(function() { 
  $(document).on('click', '.block', function() { 
    tagName(this, 'span') 
      .css('background', 'black'); // А это где? Фон остался белым! 
  }); 
});
.block { 
  display: block; 
  width: 200px; 
  height: 200px; 
} 
div.block { 
  border: 2px solid red 
} 
span.block { 
  border: 2px solid blue 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"></div>

READ ALSO
Автоматическое нажатие на кнопку
javascript

Автоматическое нажатие на кнопку

Какой js код позволяет при перезагрузке странице или вообще при ее первом посещение - автоматически выбрать какой-нибудь элемент(по нажатию...

 500
AngularJS 1.5 + Yii2 REST. Не удается выполнить POST-запрос
javascript

AngularJS 1.5 + Yii2 REST. Не удается выполнить POST-запрос

Метод API который я вызываю:

 518
Отправка запроса get из js в php и обратно
javascript

Отправка запроса get из js в php и обратно

Как правильно сделать отправку $get из js в php и обратно Есть код

 333
Работа побитового оператора ~(тильда)
javascript

Работа побитового оператора ~(тильда)

Здравствуйте, мне встретился код, не могу понять использование побитового оператора ~ в проверке на наличие подстроки в строке

 325