При выборе каждого отдельного раздела различное значение тега <p>отображается в отдельном элементе div.

Question

долгое время слушатель, впервые звонящий. Я стараюсь изо всех сил составить черновой график НХЛ, так как я делаю некоторую оценку игрока и хочу, чтобы все это выглядело необычно / мне очень весело, когда я впервые изучаю SASS (это круто, кстати) ).

Codepen: https://codepen.io/trjwaugh/pen/abONgLm

$desktop: 1000px;
$padding: 15px;
$borders: 15px;
$margin: 20px;
$logo-clip: polygon(70% 0, 100% 0%, 75% 100%, 40% 100%);
$colors: ( ggold: #FFB81C, gold-light: lighten(#FFB81C, 40%), //buf, cbj, edm, fla, nsh
bblue: #002654, blue-light: lighten(#002654, 40%), ragsblue: #0038A8, ragsblue-light: lighten(#0038A8, 40%), leafblue: #00205B, leafblue-light: lighten(#00205B, 40%), rred: #C8102E, red-light: lighten(#C8102E, 40%), oorange: #F74902, orange-light: lighten(#F74902, 40%), starsgreen: #006847, starsgreen-light: lighten(#006847, 40%), yotesred: #8C2633, yotesred-light: lighten(#8C2633, 40%), burg: #6F263D, burg-light: ligthen(#6F263D, 40%), black: black);
@function color($color-name) {
  @return map-get($map: $colors, $key: $color-name);
}

@mixin desktop {
  @media (max-width: #{$desktop}) {
    @content;
  }
}

body,
html {
  height: 100%;
  font-family: 'Montserrat', sans-serif;
}

img {
  margin: 0;
  display: block;
  width: 78px;
  height: 80px;
  float: right;
}

body {
  margin: 0;
  #bg {
    clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    @include desktop {
      //suff to change re: responsiveness
    }
  }
}

main {
  #container {
    white-space: nowrap;
    text-align: center;
  }
  section#sticky-main {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
    width: 100%;
    margin: 1em auto;
    padding: $padding;
    border-radius: $borders;
    background-size: 100% 100%, 0% 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
  }
  section#card {
    margin: 1em auto;
    float: right;
    padding: $padding;
    border-radius: $borders;
    width: 100%;
    background-size: 100% 100%, 0% 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
    -webkit-transition: .5s ease-in;
    -moz-transition: .5s ease-in;
    -o-transition: .5s ease-in;
    transition: .5s ease-in;
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      margin-bottom: 20px;
      li {
        strong {
          display: inline-block;
          margin-left: max(40px);
          margin-top: 10px;
        }
        img {
          display: block;
          width: 138px;
          height: 130px;
          float: right;
          @include desktop {
            //suff to change re: responsiveness
            width: 100px;
            height: 92px;
          }
        }
      }
    }
    #report.one {
      margin: 1em auto;
      float: right;
      padding: $padding;
      margin-right: 20px;
      border-radius: $borders;
      background-size: 100% 100%, 0% 100%;
      box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
      width: 90%;
      background-color: white !important;
      color: black !important;
    }
    #report.one:hover {
      display: block;
    }
  }
  section#card.gold:hover {
    background-color: color(ggold);
    color: white;
    background-size: 80.1% 10%, 20% 10%;
    box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
  }
  section#card.blue:hover {
    background-color: color(bblue);
    color: white;
    background-size: 80.1% 10%, 20% 10%;
    box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
  }
  section#card.red:hover {
    background-color: color(rred);
    color: white;
    background-size: 80.1% 10%, 20% 10%;
    box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
  }
}

Если вы посмотрите на Codepen, вы увидите, что у меня есть куча разделов, все будут выступать в роли карты, на которой будет отображаться информация о проекте игроков, за исключением абзаца о них. Есть несколько вещей, которые я пробовал с точки зрения достижения своей цели, но по сути я хочу иметь возможность нажимать на игроков <section onclick="showReport()" id="card"..., и чтобы всплывающее окно с игроками игроков появлялось в закрепленном элементе слева, изменяясь в зависимости от того, какую карту раздела вы используете. нажмите на. Прямо сейчас у меня есть параграф игроков в теге ap внутри раздела, но я открыт для всего. Пока у меня есть функция JS, но то, что я пробовал до сих пор, потребовало от меня написать отдельную функцию hide () для каждого раздела (всего будет 31). Я ищу метод, который также позволит мне изменять только био-информацию и никогда не будет корректировать какой-либо код, когда я хочу внести изменения в мой черновой график. Я надеюсь, что объяснил себя достаточно хорошо, пожалуйста, скажите мне, если мне нужно уточнить.

Любая помощь будет высоко оценен!

Answer 1

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

...
<section onclick="showReport(this)" id="card" class="blue">
...

Затем вы можете использовать this (теперь превращено в переменную el ), чтобы найти текст и вставить в элемент #content.

function showReport(el) {
  $('#content').text($(el).find('p').text());
}