想要每个div标签上的PopUp消息

时间：2016-07-07 08:11:28

标签： javascript html css 

    function myFunc(n) {
        var v = document.createElement("span");
        var h = document.createTextNode("See This");
        v.id = "myPopup";
        v.className = "popuptext";
        v.appendChild(h);
        var p = document.getElementsByClassName("popup");

        p[n].appendChild(v);
        myFunction();
        //document.getElementById("myPopup").style.left ="0px";
    }
    function myFunction() {
        var v = document.getElementById('myPopup');
       v.classList.toggle('show');
    }
        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;

        }

        .popup .popuptext {
            visibility: hidden;
            width: 190px;
            background-color: blue;
            color: white;
            text-align: center;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            bottom: 125%;
            left:0px;
            margin-left: -80px;

        }

            .popuptext::after {
                content: "";
                border-width: 5px;
                border-color: blue transparent transparent transparent;
                position: absolute;
                border-style: solid;
                top: 100%;
                left: 50%;
            }

       .show {
            visibility: visible !important;

        }
  <h2>Hi</h2>

  <div class="popup" onclick="myFunc(0) ">
    Click Here1

  </div>&spades;&spades;
  <div class="popup" onclick="myFunc(1) ">
    Click Here

  </div>&spades;&spades;
  <div class="popup" onclick="myFunc(2) ">
    Click Here2
  </div>

我希望当用户点击div段弹出窗口时，应该会遇到相同的div。当用户单击第一个div标签弹出窗口正常工作但单击第二个div标签时，弹出窗口会显示在第一个div标签上。第三种情况也是如此。请帮助。

3 个答案:

答案 0 :(得分：0)

您为每次点击动态创建myPopup。这将创建具有重复ID的元素，当您获取元素时，将使用首先满足的元素。尝试将n添加到v.id = "myPopup_" + n;等弹出式ID中，然后将其传递给myFunction并根据此n

显示 

function myFunc(n) {
  var v = document.createElement("span");
  var h = document.createTextNode("See This");
  v.id = "myPopup_" + n;
  v.className = "popuptext";
  v.appendChild(h);
  var p = document.getElementsByClassName("popup");

  p[n].appendChild(v);
  myFunction(n);
  //document.getElementById("myPopup").style.left ="0px";
}

function myFunction(id) {
  var v = document.getElementById('myPopup_'+id);
  v.classList.toggle('show');
}
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.popup .popuptext {
  visibility: hidden;
  width: 190px;
  background-color: blue;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  bottom: 125%;
  left: 0px;
  margin-left: -80px;
}
.popuptext::after {
  content: "";
  border-width: 5px;
  border-color: blue transparent transparent transparent;
  position: absolute;
  border-style: solid;
  top: 100%;
  left: 50%;
}
.show {
  visibility: visible !important;
}
<h2>Hi</h2>

<div class="popup" onclick="myFunc(0) ">
  Click Here1

</div>&spades;&spades;
<div class="popup" onclick="myFunc(1) ">
  Click Here

</div>&spades;&spades;
<div class="popup" onclick="myFunc(2) ">
  Click Here2
</div>

注意：理想情况下，您应该只添加类并使用querySelector，您应该在当前div中搜索。

function createNewPopup() {
  var v = document.createElement("span");
  var h = document.createTextNode("See This");
  v.className = "popuptext";
  v.appendChild(h);
  return v;
}

function myFunc(n) {
  var p = document.querySelectorAll(".popup")[n];
  if (!p.querySelector(".popuptext"))
    p.appendChild(createNewPopup());
  myFunction(p);
  //document.getElementById("myPopup").style.left ="0px";
}

function myFunction(el) {
  var v = el.querySelector(".popuptext")
  v.classList.toggle('show');
}
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.popup .popuptext {
  visibility: hidden;
  width: 190px;
  background-color: blue;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  bottom: 125%;
  left: 0px;
  margin-left: -80px;
}
.popuptext::after {
  content: "";
  border-width: 5px;
  border-color: blue transparent transparent transparent;
  position: absolute;
  border-style: solid;
  top: 100%;
  left: 50%;
}
.show {
  visibility: visible !important;
}
<h2>Hi</h2>

<div class="popup" onclick="myFunc(0) ">
  Click Here1

</div>&spades;&spades;
<div class="popup" onclick="myFunc(1) ">
  Click Here

</div>&spades;&spades;
<div class="popup" onclick="myFunc(2) ">
  Click Here2
</div>

答案 1 :(得分：0)

由于您使用了id，因此必须删除重新显示的弹出窗口。 JS只选择第一次出现的id。当你使用一个类而不是一个id时，你应该是安全的。我在片段中删除了活动弹出窗口，然后再次在点击的元素中显示它。

论点也略有变化。你可以在html中给onclick这个事件。然后使用event.target来了解用户单击了哪个元素。这将消除计算您想要点击的div的问题

＆＃13;
＆＃13; 
function myFunc(event) {
        var v = document.getElementById('myPopup');
        if(v){
          v.remove();
        }
        var v = document.createElement("span");
        var h = document.createTextNode("See This");
        v.id = "myPopup";
        v.className = "popuptext";
        v.appendChild(h);

        event.target.appendChild(v);
        myFunction();
        //document.getElementById("myPopup").style.left ="0px";
    }
    function myFunction() {
        var v = document.getElementById('myPopup');
        v.classList.toggle('show');
    }
＆＃13; 
.popup {
            position: relative;
            display: inline-block;
            cursor: pointer;

        }

        .popup .popuptext {
            visibility: hidden;
            width: 190px;
            background-color: blue;
            color: white;
            text-align: center;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            bottom: 125%;
            left:0px;
            margin-left: -80px;

        }

            .popuptext::after {
                content: "";
                border-width: 5px;
                border-color: blue transparent transparent transparent;
                position: absolute;
                border-style: solid;
                top: 100%;
                left: 50%;
            }

       .show {
            visibility: visible !important;

        }
＆＃13; 
<h2>Hi</h2>

  <div class="popup" onclick="myFunc(event) ">
    Click Here1

  </div>&spades;&spades;
  <div class="popup" onclick="myFunc(event) ">
    Click Here

  </div>&spades;&spades;
  <div class="popup" onclick="myFunc(event) ">
    Click Here2
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

var p = document.getElementsByClassName（“popup”）;

当你使用它时，它总是使用“popup”类来查找第一个元素。

因此你的弹出窗口出现在第一个元素上。

改为使用'id'属性。

 function myFunc(n,id) {
        var v = document.createElement("span");
        var h = document.createTextNode("See This");
        v.id = "myPopup";
        v.className = "popuptext";
        v.appendChild(h);
        var p = document.getElementsById(id);

        p[n].appendChild(v);
        myFunction();
        //document.getElementById("myPopup").style.left ="0px";
    }
    function myFunction() {
        var v = document.getElementById('myPopup');
       v.classList.toggle('show');
    }
        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;

        }

        .popup .popuptext {
            visibility: hidden;
            width: 190px;
            background-color: blue;
            color: white;
            text-align: center;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            bottom: 125%;
            left:0px;
            margin-left: -80px;

        }

            .popuptext::after {
                content: "";
                border-width: 5px;
                border-color: blue transparent transparent transparent;
                position: absolute;
                border-style: solid;
                top: 100%;
                left: 50%;
            }

       .show {
            visibility: visible !important;

        }
  <h2>Hi</h2>

  <div class="popup" id="popup1" onclick="myFunc(0,'popup1') ">
    Click Here1

  </div>&spades;&spades;
  <div class="popup" id="popup2" onclick="myFunc(1,'popup2') ">
    Click Here

  </div>&spades;&spades;
  <div class="popup" id="popup3" onclick="myFunc(2,'popup3') ">
    Click Here2
  </div>
相关问题
最新问题