Пользовательский тег HTML - PullRequest
Новая
       10

Пользовательский тег HTML

0 голосов
/ 07 октября 2019

У меня есть следующий HTML: 

<a class="rounded" data-trigger="hover" data-toggle="popover"
data-html="true" data-placement="right" data-title="some data title"
data-content="some data content" href="#" onclick="return false;"
onmouseover="onMouseOver();" onmouseout="onMouseOut();">
    <i class="fas fa-info-circle fa-sm" aria-hidden="true" style="color: var(--tint-color);"></i>
</a>

<script>
  function onMouseOver() { console.log('onMouseOver') }
  function onMouseOut() { console.log('onMouseOut') }
</script>

, который я неоднократно называю с различными значениями data-title и data-content. Есть ли способ получить пользовательский тег , такой как: 

<popover data-title="some data title" data-content="some data content"></popover>

Это лучший способ для достижения этого или сделать класс CSS более подходящим?

1 Ответ

0 голосов
/ 07 октября 2019

Вы не можете добавлять пользовательские теги HTML, но вы можете добавить «id» или «class» к любому тегу HTML. Например, вместо: 

<popover data-title="some data title" data-content="some data content"></popover>

Do: 

<div id="popover" data-title="some data title" data-content="some data content"><div>

Затем вы можете выбрать свой собственный div с помощью jQuery: 

<script>$("#popover").mouseover(function (){ console.log("onMouseOver")});</script>

Если вам нужно больше, чемодин пользовательский элемент, который должен вести себя точно так же, вы можете сделать это: 

     <div class="popover" data-title="some data title" data-content="some data content"><div>
 <script>$(".popover").mouseover(function (){console.log("onMouseOver")});</script>
...