自动化工具提示功能-因此，可以使用N次

Question

我正在[SUP]标签上创建工具提示功能，以在文章中显示参考。我所取得的成就是100％正确且工作正常。但是，如果我必须添加100多个引用，这将是非常繁重的代码工作。因此，我正在尝试将其转换为一些自动代码生成的东西。

我所做的如下：

1个工具提示的HTML代码想要添加多个，将完成myPopup2，myPopup3，myPopup4等操作。

<span class="popup1"><sup>[1]</sup><span id="myPopup1" class="popuptext1"><em>Description Text Here Goes</em><a href="http://www.refrenceulrwillgohere.com/somethinglikethis" target="_blank">View in Article</a></span></span>

5个工具提示的CSS代码：

.popup1 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.popup2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.popup3 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.popup4 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.popup5 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.popup1 .popuptext1 {
  visibility: hidden;
  width: 280px;
  font-size: 13px;
  background-color: #f5f5f5;
  color: #000;
  text-align: left;
  box-shadow: 2px 2px #0003;  border-left: 4px solid #fdcc17; 
  padding: 8px 5px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
  margin-left: 5px;
}
.popup2 .popuptext2 {
  visibility: hidden;
  width: 280px;
  font-size: 13px;
  background-color: #f5f5f5;
  color: #000;
  text-align: left;
  box-shadow: 2px 2px #0003;  border-left: 4px solid #fdcc17; 
  padding: 8px 5px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
  margin-left: 5px;
}

.popup3 .popuptext3 {
  visibility: hidden;
  width: 280px;
  font-size: 13px;
  background-color: #f5f5f5;
  color: #000;
  text-align: left;
  box-shadow: 2px 2px #0003;  border-left: 4px solid #fdcc17; 
  padding: 8px 5px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
  margin-left: 5px;
}

.popup4 .popuptext4 {
  visibility: hidden;
  width: 280px;
  font-size: 13px;
  background-color: #f5f5f5;
  color: #000;
  text-align: left;
  box-shadow: 2px 2px #0003;  border-left: 4px solid #fdcc17; 
  padding: 8px 5px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
  margin-left: 5px;
}

.popup5 .popuptext5 {
  visibility: hidden;
  width: 280px;
  font-size: 13px;
  background-color: #f5f5f5;  color: #000;
  text-align: left;
  box-shadow: 2px 2px #0003;  border-left: 4px solid #fdcc17; 
  padding: 8px 5px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
  margin-left: 5px;
}
.popup1 .popuptext1::before {
  content: "X";
  position: absolute;
  top: 0%;
  left: 100%;
  margin-left: -5px;
  background-color: #f5f5f5;
  border: 1px solid #b1b1b1;
  padding: 0px 5px;
}
.popup2 .popuptext2::before {
  content: "X";
  position: absolute;
  top: 0%;
  left: 100%;
  margin-left: -5px;
  background-color: #f5f5f5;
  border: 1px solid #b1b1b1;
  padding: 0px 5px;
}
.popup3 .popuptext3::before {
  content: "X";
  position: absolute;
  top: 0%;
  left: 100%;
  margin-left: -5px;
  background-color: #f5f5f5;
  border: 1px solid #b1b1b1;
  padding: 0px 5px;
}
.popup4 .popuptext4::before {
  content: "X";
  position: absolute;
  top: 0%;
  left: 100%;
  margin-left: -5px;
  background-color: #f5f5f5;
  border: 1px solid #b1b1b1;
  padding: 0px 5px;
}
.popup5 .popuptext5::before {
  content: "X";
  position: absolute;
  top: 0%;
  left: 100%;
  margin-left: -5px;
  background-color: #f5f5f5;
  border: 1px solid #b1b1b1;
  padding: 0px 5px;
}
.popup1 .show1 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
.popup2 .show2 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
.popup3 .show3 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
.popup4 .show4 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
.popup5 .show5 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
sup {
    color: #0072ff;
}

5个工具提示的JS代码：

<script>
jQuery(function(){
    jQuery(".popup1").attr('onclick','myFunction1()');
    jQuery(".popup2").attr('onclick','myFunction2()');
    jQuery(".popup3").attr('onclick','myFunction3()');
    jQuery(".popup4").attr('onclick','myFunction4()');
    jQuery(".popup5").attr('onclick','myFunction5()');
});
<script>
// When the user clicks on div, open the popup
function myFunction1() {
var popup1 = document.getElementById("myPopup1");
popup1.classList.toggle("show1");
}
function myFunction2() {
    var popup2 = document.getElementById("myPopup2");
    popup2.classList.toggle("show2");
}
function myFunction3() {
      var popup3 = document.getElementById("myPopup3");
      popup3.classList.toggle("show3");
}
function myFunction4() {
        var popup4 = document.getElementById("myPopup4");
        popup4.classList.toggle("show4");
}
function myFunction5() {
    var popup5 = document.getElementById("myPopup5");
    popup5.classList.toggle("show5");
}
</script>

如果添加100条工具提示，这种排序会使代码非常复杂且冗长。因此，我想要完成的就是缩短这段代码，在我的文章中添加N个工具提示。

任何建议将不胜感激。另外，请让我知道是否可能，因为我不确定。

Answer 1

嗨，您可以像这样更改代码

<span class="popup"><sup>[1]</sup>
    <span id="myPopup1" class="popuptext">
        <em>Description Text Here Goes</em>
        <a href="http://www.refrenceulrwillgohere.com/somethinglikethis" target="_blank">View in Article</a>
    </span>
</span>

脚本会像

jQuery(function(){
   jQuery(".popup").on('click', function(){
      $(this).find('.popuptext').toggleClass("show");
   })

});

您还可以清理CSS。为所有元素仅制作一个类

Answer 2

您当然可以（如果我理解正确的话）可以大大简化上述内容，但是以下内容不使用jQuery（请勿自己使用）

本质上，如果您需要通过ID引用每个元素，则ID属性是简化代码的障碍。最好使用一个类（IMO），以便您可以使用querySelectorAll

来简单地获取对所有项目的引用

使用该参考，您可以轻松地为节点列表中的每个元素分配一个通用事件处理程序。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>popups...simplified</title>
        <style>
            body, body *{box-sizing:border-box;}
            .popup{
                display:inline-block;
                background:white;

                position: relative;
                cursor: pointer;

                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .popuptext{
                visibility: hidden;
                width: 280px;
                font-size: 13px;
                background-color: #f5f5f5;
                color: #000;
                text-align: left;
                box-shadow: 2px 2px #0003;

                border-left: 4px solid #fdcc17; 
                padding: 8px 5px;
                position: absolute;
                z-index: 1;
                top: -5px;
                left: 105%;
                margin-left: 5px;
            }
            .popuptext:before{
                content: "X";
                position: absolute;
                top: 0%;
                left: 100%;
                margin-left: -5px;
                background-color: #f5f5f5;
                border: 1px solid #b1b1b1;
                padding: 0px 5px;
            }
            .show{
                border:2px solid red;
                background:rgba(255,0,0,0.1);
                visibility: visible;
                -webkit-animation: fadeIn 1s;
                animation: fadeIn 1s;
            }
            @keyframes fadeIn {
                from {opacity: 0;}
                to {opacity:1 ;}
            }
            @-webkit-keyframes fadeIn {
                from {opacity: 0;} 
                to {opacity: 1;}
            }
            sup {
                color: #0072ff;
            }
        </style>
    </head>
    <body>
        <span class='popup'>
            <sup>[1]</sup>
            <span class='popuptext'>
                <em>Description Text Here Goes: POPUP # 1</em>
                <a href='http://www.refrenceulrwillgohere.com/somethinglikethis' target='_blank'>View in Article</a>
            </span>
        </span>

        <span class='popup'>
            <sup>[2]</sup>
            <span class='popuptext'>
                <em>Description Text Here Goes: POPUP # 2</em>
                <a href='http://www.refrenceulrwillgohere.com/somethinglikethis' target='_blank'>View in Article</a>
            </span>
        </span>

        <span class='popup'>
            <sup>[3]</sup>
            <span class='popuptext'>
                <em>Description Text Here Goes: POPUP # 3</em>
                <a href='http://www.refrenceulrwillgohere.com/somethinglikethis' target='_blank'>View in Article</a>
            </span>
        </span>

        <script>
            const popuphandler=function(e){
                let popup=this.querySelector('span.popuptext');
                    popup.classList.toggle('show');
            };
            Array.prototype.slice.call( document.querySelectorAll( 'span.popup' ) ).forEach(
                span => {
                    span.addEventListener('click', popuphandler )
                }
            );
        </script>

    </body>
</html>