Блог

Главная - Вопросы по программированию - Возникли проблемы с отображением и скрытием разного текста onclick

Возникли проблемы с отображением и скрытием разного текста onclick

#javascript #html

#javascript #HTML

Вопрос:

У меня есть таблица, в которой можно щелкнуть текст в столбце слева, а текст в столбце справа изменится соответствующим образом. Это должно работать так: при нажатии на одну из опций слева отображается только текст справа, соответствующий выбранной опции. Однако, когда я нажимаю один из своих параметров слева, он просто скрывает весь текст справа и не отображает ту часть, которую я хочу видеть.

  var selectColor = function( element ) {

                /* Change color of text based on current selection */
                prots = document.getElementsByClassName( "prot_id" );
                for ( i = 0; i < prots.length;   i ) {
                    prots.item(i).style.color = 'black';
                    element.style.color = 'red';
                }            
            }

            var selectProtein = function( element ) {
                /* Change what info is displayed based on current selection */
                var proteinInfo = document.getElementsByClassName( "prot_func" ) ;

                for( j = 0; j < proteinInfo.length;   j ) {
                    proteinInfo[j].style['display'] = 'none' ;
                }
                
                var proteinIDs = ["gria1", "gria2", "gria3", "gria4"] ;

                proteinIDs.forEach(function(entry) {
                    if( element.src.includes(entry)) {
                    var theProtein = document.getElementById(entry) ;
                    theProtein.style['display'] = 'block' ;
                    }
                })
            }  
 <head>
     <link rel='stylesheet' type='text/css' href='./index.css'> 
</head>

    <body>
        
        <table>
            <tr>
                <td>
                    <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA1_HUMAN</p>
                    <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA2_HUMAN</p>
                    <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA3_HUMAN</p>
                    <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA4_HUMAN</p>
                </td>
                <td> 
                   <p id="gria1" class="prot_func">...</p>

                   <p id="gria2" class="prot_func">...</p>

                   <p id="gria3" class="prot_func">...</p>

                   <p id="gria4" class="prot_func">...</p>
                </td>
            </tr>
        </table>

    </body>

Комментарии:

1. Можете ли вы опубликовать более полный фрагмент кода — например, включая определение таблицы html.

Ответ №1:

У вас есть несколько проблем, поэтому я обновил ваш код.

Я избавился от onclick и вместо этого использовал обработчик событий.

Я избавился от цикла белкового массива и просто добавил каждый идентификатор в качестве атрибута данных в теги абзаца.

Вместо того, чтобы скрывать / показывать на основе стиля, я просто добавляю / удаляю класс.

 var selectColor = function(element) {

  /* Change color of text based on current selection */
  prots = document.getElementsByClassName("prot_id");
  for (i = 0; i < prots.length;   i) {
    prots.item(i).classList.remove("active");
  }

  element.classList.add("active")
}

var selectProtein = function(element) {
  var proteinInfo = document.getElementsByClassName("prot_func");

  for (j = 0; j < proteinInfo.length;   j) {
    proteinInfo[j].classList.remove("active");
  }

  theProtein = document.querySelector("#"   element.dataset.id);
  theProtein.classList.add("active");
}

document.querySelectorAll(".prot_id").forEach(function(el) {
  el.addEventListener("click", function(e) {
    selectColor(e.target);
    selectProtein(e.target)
  });
});  
 .prot_func {
  display: none;
}

.prot_func.active {
  display: block;
}

.prot_id.active {
  color: red;
}  
 <table>
  <tr>
    <td>
      <p class="prot_id" data-id="gria1">GRIA1_HUMAN</p>
      <p class="prot_id" data-id="gria2">GRIA2_HUMAN</p>
      <p class="prot_id" data-id="gria3">GRIA3_HUMAN</p>
      <p class="prot_id" data-id="gria4">GRIA4_HUMAN</p>
    </td>
    <td>
      <p id="gria1" class="prot_func">.1..</p>

      <p id="gria2" class="prot_func">.2..</p>

      <p id="gria3" class="prot_func">.3..</p>

      <p id="gria4" class="prot_func">..4.</p>
    </td>
  </tr>
</table>

Ответ №2:

Из вашего фрагмента вы собираетесь отобразить параметры с правой стороны на основе выбранного p содержимого тега.

Поэтому, если GRIA1_HUMAN выбрано, gria1 должно отображаться.

Вы можете получить значение p содержимого, используя innerText атрибут, и сравнить значения, используя его. Я приложил рабочий пример.

 var selectColor = function (element) {
  /* Change color of text based on current selection */
  prots = document.getElementsByClassName("prot_id");
  for ( i = 0; i < prots.length;   i ) {
    prots.item(i).style.color = 'black';
  }
  
  element.style.color = 'red';
}

var selectProtein = function (element) {
  /* Change what info is displayed based on current selection */
  var proteinInfo = document.getElementsByClassName("prot_func") ;

  for( j = 0; j < proteinInfo.length;   j) {
    proteinInfo[j].style['display'] = 'none' ;
  }
  
  var proteinIDs = ["gria1", "gria2", "gria3", "gria4"] ;

  const elementText = element.innerText.toLowerCase();
  proteinIDs.forEach(function(entry) {
    if(elementText.includes(entry)) {
      var theProtein = document.getElementById(entry);
      theProtein.style['display'] = 'block';
    }
  });
}  
 <table border="1">
  <tr>
    <td>
      <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA1_HUMAN</p>
    </td>
    <td> 
      <p id="gria1" class="prot_func">...</p>
    </td>
  </tr>
  <tr>
    <td><p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA2_HUMAN</p></td>
    <td><p id="gria2" class="prot_func">...</p></td>
  </tr>
  <tr>
    <td><p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA3_HUMAN</p></td>
    <td><p id="gria3" class="prot_func">...</p></td>
  </tr>
  <tr>
    <td><p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA4_HUMAN</p></td>
    <td><p id="gria4" class="prot_func">...</p></td>
  </tr>
</table>