Javascript-форум - Показать сообщение отдельно

laimas · #74 (**permalink**) 19.03.2019, 19:22

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre>
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 50px 0 0 50px;"&gt;&lt;span&gt;border-radius: 50px 0 0 50px;&lt;/span&gt;&lt;/div&gt;
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 40px 10px;"&gt;&lt;span&gt;border-radius: 40px 10px;&lt;/span&gt;&lt;/div&gt;
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 13em/3em;"&gt;&lt;span&gt;border-radius: 13em/3em;&lt;/span&gt;&lt;/div&gt;
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius:  13em 0.5em/1em 0.5em;"&gt;&lt;span&gt;border-radius: 13em 0.5em/1em 0.5em;&lt;/span&gt;&lt;/div&gt;
&lt;div class="example" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 8px;"&gt;&lt;span&gt;border-radius: 8px;&lt;/span&gt;&lt;/div&gt;
</pre>

<div id="run"></div>

<script>
var f = document.createElement("template"), r = document.querySelector('#run');
f.innerHTML = document.querySelector('pre').textContent.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
var o = f.content.querySelectorAll('.example'), i = 0, k = o.length;
r.appendChild(o[i]); 

r.addEventListener('click', function() {
   i = ++i % k;
   this.innerHTML = '';
   this.appendChild(o[i])
});
</script>
</body>
</html>

При условии, что все демонстрации имеют один и то же класс - example, все что необходимо выполнить содержится в них, тогда это единственный для всех страниц код обработчика.