javascript onclick для получения дополнительной информации

Я пытаюсь составить список. Когда я нажимаю на каждый элемент в списке, будет отображаться описание. Прямо сейчас мой код отображает только элементы, и когда я щелкаю элемент, отображаются описания всех элементов. Может кто-нибудь помочь мне решить эту проблему?

<script type="text/javascript">
function moreInfo(){
var para= document.createElement("p")
var divObj = document.getElementById("p1");
divObj.appendChild(para);
var divObj = document.getElementById("p2");
divObj.appendChild(para);
var divObj = document.getElementById("p3");
divObj.appendChild(para);
var divObj = document.getElementById("p4");
divObj.appendChild(para);
var txt = document.createTextNode("This product is good");
para.appendChild(txt);
var txt = document.createTextNode("This product is bad");
para.appendChild(txt);
var txt = document.createTextNode("This product is pretty");
para.appendChild(txt);
var txt = document.createTextNode("This product is ugly");
para.appendChild(txt);
}
</script>
</head>
<body>
<div id="p1" class="divStyle">
    <p onclick="moreInfo()"> 
    Good
   </p>
<div id="p2" class="divStyle">
    <p onclick="moreInfo()"> 
    Bad
   </p>
<div id="p3" class="divStyle">
    <p onclick="moreInfo()"> 
    Pretty
   </p>
<div id="p4" class="divStyle">
    <p onclick="moreInfo()"> 
    Ugly
   </p>
</div>
Источник

7 ответов

Я только что попробовал ваш код и попробовал ваше требование. Оставшаяся часть - удалить созданный элемент перед отображением нового элемента.

Вот фрагмент кода.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
function moreInfo(ClickedId){
    var myElem = document.getElementById('extraP');
    if (myElem !== null) {
        myElem.remove();
        }
    var para= document.createElement("p")
    para.setAttribute("id", "extraP");
    if(ClickedId == "p1"){
        var divObj = document.getElementById("p1");
        var txt = document.createTextNode("This product is good");
        divObj.appendChild(para);
    }
    if(ClickedId == "p2"){
        var divObj = document.getElementById("p2");
        var txt = document.createTextNode("This product is bad");
        divObj.appendChild(para);
    }
    if(ClickedId == "p3"){
        var divObj = document.getElementById("p3");
        var txt = document.createTextNode("This product is pretty");
        divObj.appendChild(para);
    }
    if(ClickedId == "p4"){
        var divObj = document.getElementById("p4");
        var txt = document.createTextNode("This product is ugly");
        divObj.appendChild(para);
    }
    para.appendChild(txt);

}
</script>
</head>
<body>
<div id="p1" class="divStyle">
    <p onclick="moreInfo(this.parentNode.id)"> 
    Good
   </p>
<div id="p2" class="divStyle">
    <p onclick="moreInfo(this.parentNode.id)"> 
    Bad
   </p>
<div id="p3" class="divStyle">
    <p onclick="moreInfo(this.parentNode.id)"> 
    Pretty
   </p>
<div id="p4" class="divStyle">
    <p onclick="moreInfo(this.parentNode.id)"> 
    Ugly
   </p>
</div>
</html>

Пожалуйста, дайте мне знать, помогает ли это вам или нет.

Спасибо

Источник

Есть несколько вещей, на которые стоит обратить внимание:

  1. Вы переназначаете одну и ту же переменную (var divObj) четыре раза.
  2. То же самое касается var txt.
  3. В идеале вы должны назначать каждый из них один раз, а затем динамически создавать свою строку в зависимости от того, какой элемент был нажат.

примечание: я назначил функцию объекту 'window' ( window.moreInfo(строка)), но вы все еще можете использовать (функция moreInfo (строка)) дополнительную информацию здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window вот одно из возможных решений (есть много - просто надеемся, что за этим будет легко следовать):

<head>
<script type="text/javascript">
  window.moreInfo = function(string){
    var target = event.target;
    var para= document.createElement("p");
    var txt = document.createTextNode("This product is " + string);
    target.appendChild(para).appendChild(txt);
  }
  </script>
</head>
<body>
<div id="p1" class="divStyle">
    <p onclick="moreInfo('good')"> 
    Good
   </p>
<div id="p2" class="divStyle">
    <p onclick="moreInfo('bad')"> 
    Bad
   </p>
<div id="p3" class="divStyle">
    <p onclick="moreInfo('pretty')"> 
    Pretty
   </p>
<div id="p4" class="divStyle">
    <p onclick="moreInfo('ugly')"> 
    Ugly
   </p>
</div>
<div id="p4" class="divStyle">
    <p onclick="moreInfo()"> 
    No parameter
   </p>
</div>
</body>
Источник

Вы можете передать значение, которое вы хотите отобразить при вызове функции JavaScript. Как вы сказали, вы новичок в Javascript, который я изменил, как показано ниже. надеюсь это поможет

<head>
  <script type="text/javascript">
    function moreInfo(p){
    var para= document.createElement("p")
    var divObj = document.getElementById("results");
    divObj.innerHTML = ""; // remove the previous clicks results
    divObj.appendChild(para);
    var txt = document.createTextNode("This product is " + p);
    para.appendChild(txt);
    }
  </script>
</head>
<body>
<div id="p1" class="divStyle">
    <p onclick="moreInfo('good')"> Good </p>
</div>
<div id="p2" class="divStyle">
  <p onclick="moreInfo('bad')"> Bad</p>
</div>
<div id="p3" class="divStyle">
  <p onclick="moreInfo('pretty')"> Pretty</p>
</div>
<div id="p4" class="divStyle">
  <p onclick="moreInfo('ugly')"> Ugly</p>
</div>
<div id='results'></div>

Источник

В вашем htmldiv совсем не сбалансированы. Закрытия нет tag для некоторых из div, В результате он стал вложенным DOM.

var _getClickedElement =document.getElementsByTagName('p');

// Attaching eventlistener to each p tag
for(var i =0; i<_getClickedElement.length;i++){
  var _m = i;  //because of event delegation binding i with the element
  _getClickedElement[_m].addEventListener('click',function(event){
    var _getParentId = this.parentNode.id; // get parent Id of click element
    _showDesc(_getParentId);
})
}


// This function will create p to show the description
function _showDesc(parentId){
var text = "";
switch(parentId) {
    case "p1":
        text ="This product is good";
      break;
     case "p2":
        text ="This product is bad"
        break;
    case "p3":
        text ="This product is pretty"
        break;
    case "p4":
        text ="This product is ugly"
        break;
}

//Remove any previous description tag.

var _getPrevElement =document.getElementById('desc');
if(_getPrevElement !== null){
_getPrevElement.parentNode.removeChild(_getPrevElement);
}


var para= document.createElement("p");
para.id = "desc"
para.innerHTML =text;
document.getElementById(parentId).appendChild(para);
}

Нажмите здесь, чтобы увидеть живое действие

Источник

Я отредактировал ваш код с помощью close div и написал javascript, чтобы добавить к конкретному элементу, который вы нажали.

<script type="text/javascript">
  function moreInfo(object){
    var status = object.innerHTML;
    var txt = document.createTextNode("This product is " + status);
    var para= document.createElement("p");
    var divObject = object.parentNode;
    var allP = divObject.childNodes;
    // prevent double add
    if (allP.length > 1) {
        divObject.removeChild(divObject.childNodes[2]);
    }
    divObject.appendChild(para);
    para.appendChild(txt);
  }
</script>
</head>
<body>
<div id="p1" class="divStyle">
    <p onclick="moreInfo(this)"> 
    Good
   </p>
</div>
<div id="p2" class="divStyle">
    <p onclick="moreInfo(this)"> 
    Bad
   </p>
</div>
<div id="p3" class="divStyle">
    <p onclick="moreInfo(this)"> 
    Pretty
   </p>
</div>
<div id="p4" class="divStyle">
    <p onclick="moreInfo(this)"> 
    Ugly
   </p>
 </div>
</div>

Источник

Замените свой код JS на это:

function moreInfo(e){
    var str = e.currentTarget.parentElement.id;
    switch(str) {
        case "p1":
            var obj = document.getElementById("p1");
            var para= document.createElement("p");
            para.appendChild(document.createTextNode("This product is good"))
            obj.appendChild(para);
            break;
        case "p2":
            obj = document.getElementById("p2");
            para= document.createElement("p");
            para.appendChild(document.createTextNode("This product is bad"))
            obj.appendChild(para);
            break;
        case "p3":
            obj = document.getElementById("p3");
            para= document.createElement("p");
            para.appendChild(document.createTextNode("This product is pretty"))
            obj.appendChild(para);
            break;
        case "p4":
            obj = document.getElementById("p4");
            para= document.createElement("p");
            para.appendChild(document.createTextNode("This product is ugly"))
            obj.appendChild(para);
            break;
        default:
            alert("clicked on "+str);
    }
}

и замените ваш HTML-код следующим:

<div id="p1" class="divStyle">
    <p onclick="moreInfo(event)"> Good </p>
</div>
<div id="p2" class="divStyle">
    <p onclick="moreInfo(event)"> Bad </p>
</div>
<div id="p3" class="divStyle">
    <p onclick="moreInfo(event)"> Pretty </p>
</div>
<div id="p4" class="divStyle">
    <p onclick="moreInfo(event)"> Ugly </p>
</div>
Источник

Вы можете суммировать свой код, немного изменив. Создайте результат p для отображения текущего клика this в качестве параметра для получения текущего элемента и innerHTML для получения внутренней строки.

<script type="text/javascript">
function moreInfo(t){
var para= document.getElementById("result");
para.innerHTML = "";//to set empty for new click
var txt = document.createTextNode("This product is "+t.innerHTML);
para.appendChild(txt);
}
</script>
</head>
<body>
<div id="p1" class="divStyle">
    <p onclick="moreInfo(this)"> 
    Good
   </p>
<div id="p2" class="divStyle">
    <p onclick="moreInfo(this)"> 
    Bad
   </p>
<div id="p3" class="divStyle">
    <p onclick="moreInfo(this)"> 
    Pretty
   </p>
<div id="p4" class="divStyle">
    <p onclick="moreInfo(this)"> 
    Ugly
   </p>
</div>
<p id="result"></p>
Источник
Другие вопросы по тегам