Параметр функции Javascript для целевого идентификатора HTML и добавления класса CSS - PullRequest
Новая
       25

Параметр функции Javascript для целевого идентификатора HTML и добавления класса CSS

0 голосов
/ 24 января 2019

Я пытаюсь отобразить галерею тренеров на веб-странице, отображая изображения с именем.Я хотел бы включить всплывающее окно onClick, которое будет отображать больше информации для каждого тренера, переключая класс CSS.-Enable {} путем нацеливания на определенные элементы контейнера, используя их связанные идентификаторы.Я настроил html так, чтобы во всплывающем окне появлялась кнопка «закрыть», переключая класс css .enable на этот конкретный контейнер.

Я подумал использовать действительно простую функцию с параметром для выбора идентификатора, затемпереключить класс на идентификатор.В моем примере все, что находится внутри первого тега, видно по умолчанию, и следующий div активируется переключением класса css.-Enable.Мой пример «Крис» - это тренер, и, щелкая блок контейнера по умолчанию, я активирую функцию «coachWindow (coach)» и передаю «Крис» в качестве параметра функции, чтобы выбрать div с идентификатором «chris» и переключить CSSучебный класс.

function coachWindow ( coach ) {
  document.querySelector("#" + coach).classList.toggle("-enable");
}
.-enable {
display:block;
}
<a onclick="coachWindow(chris)"><div>
<div class="enlarge">
    <div class="chris-img coach-img-sizing">
    <div class="coach-overlay">
    <h3 class="coach-name">Chris</h3>
    </div>
    </div>
</div>
</a>

<div id="chris" class="coach"> <!--(-enable class appears here)-->
  <div class="lightwindow"></div>
   <div class="coach-box">
    <div class="coach-container">
     <h3 class="coach-heading">Chris</h3>
     <div class="image-container chris-img coach-img-sizing"></div>
     <div class="coach-text">
      <p>
      Text block on this coach.
      </p> 
     </div>
     <button onclick="coachWindow(chris)" class="coach-button">Close</button>
    </div>
  </div>
</div>

Я не был уверен в параметрах querySelector, но я видел пример с jQuery, который выглядел как $('#' + parameter), способный нацеливаться на parameterИдентификаторы

Когда я запускаю document.querySelector(chris).classList.toggle("-enable"); из консоли, появляется всплывающее окно, однако при запуске того же идентификатора через функцию coachWindow возвращает undefined и результаты typeError.

Как мне написать свою функцию, чтобы яМожно ли пройти через любой идентификатор тренера и отобразить всплывающее окно для соответствующего тренера?

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Это намного проще, чем вы думаете. Во-первых, не сосредотачивайтесь на id с, поскольку это приведет к более сложному и хрупкому решению. Если вы правильно структурируете свой HTML, это просто вопрос показа или сокрытия соответствующих div путем нахождения его с помощью методов DOM .closest() и .nextElementSibling(), а затем добавления и удаление предустановленного класса с .classList.add и .classList.Remove. При таком подходе не имеет значения, что такое id (вам даже не нужно их использовать), и вы можете добавлять / удалять тренеры в любое время без необходимости изменять JavaScript. Просто сохраняйте правильную структуру HTML.

Кроме того, не используйте элементы <a> как триггер события click. Используйте их только во время навигации, иначе это семантически неверно. Почти любой видимый элемент может иметь настроенное событие click, как вы увидите ниже. В том же духе вы можете создать что-нибудь похожее на что угодно, поэтому даже не связанные с ссылками элементы могут выглядеть как ссылки или кнопки или что-то еще.

Говоря о семантике, не используйте заголовки (h1...h6) из-за того, как они заставляют текст выглядеть. На самом деле, никогда не используйте какой-либо элемент HTML из-за встроенного стиля, который идет с ним. Используйте правильный тег для описания вашего контента и используйте CSS для стилизации элементов позже. h3 должен использоваться только для описания контента, который находится на третьем подуровне в иерархии. Это означает, что они должны появляться только как дети h2 и что h2 должно быть в h1. 

// Get all the "links" into an array
let links = Array.prototype.slice.call(document.querySelectorAll("h1.coach-name"));

// Loop over the array of links
links.forEach(function(link){
  // Set up a click event handler for each link
  link.addEventListener("click", function(){
    // Locate the outermost div of the clicked element and
    // remove the hidden class from the following element
    link.closest(".enlarge").nextElementSibling.classList.remove("hidden");
  });
});

// Get all the close buttons into an array
let closeButtons = Array.prototype.slice.call(document.querySelectorAll(".coach-button"));

// Loop through all the close buttons
closeButtons.forEach(function(btn){
  // Set up a click event handler for each
  btn.addEventListener("click", function(){
    // Locate the nearest ancestor div that holds the popup
    // and add back the hidden class to hide the current popup
    btn.closest(".coach").classList.add("hidden");
  });
});
.coach { 
  border:6px double #e0e0e0; 
  padding:5px; position:absolute; 
  top:25px; left:25px; 
  background-color:#55f; 
  color:#ff0;
  padding:10px;
  border-radius:3px;
}

.enlarge h1, .coach h1 {
  font-size:1em; 
  margin-top:.5em;
  padding:3px;
  text-align:center;
}

.enlarge h1 { 
  border:1px solid #808080;
  background-color:#e0e0e0;
  display:inline-block;
  border-radius:2px;
  width:75px;
  cursor:pointer;
}

.enlarge h1:hover { box-shadow:0 0 1px #606060; }

/* This will be set on the popups by default
   and then removed as needed. */
.hidden { display:none; }
<div class="enlarge">
  <div class="chris-img coach-img-sizing">
    <div class="coach-overlay">
      <h1 class="coach-name">Chris</h1>
    </div>
  </div>
</div>

<div id="chris" class="coach hidden"> <!-- each popup is hidden by default via CSS -->
  <div class="lightwindow"></div>
  <div class="coach-box">
   <div class="coach-container">
    <h1 class="coach-heading">Chris</h1>
    <div class="image-container chris-img coach-img-sizing"></div>
    <div class="coach-text">
     <p>Text block on this coach.</p> 
    </div>
    <button class="coach-button">Close</button>
   </div>
 </div>
</div>

<!-- ********************************************** -->

<div class="enlarge">
  <div class="chris-img coach-img-sizing">
    <div class="coach-overlay">
      <h1 class="coach-name">Mary</h1>
    </div>
  </div>
</div>

<div id="chris" class="coach hidden">
  <div class="lightwindow"></div>
  <div class="coach-box">
   <div class="coach-container">
    <h1 class="coach-heading">Mary</h1>
    <div class="image-container chris-img coach-img-sizing"></div>
    <div class="coach-text">
     <p>Text block on this coach.</p> 
    </div>
    <button class="coach-button">Close</button>
   </div>
 </div>
</div>

<!-- ********************************************** -->

<div class="enlarge">
  <div class="chris-img coach-img-sizing">
    <div class="coach-overlay">
      <h1 class="coach-name">Steve</h1>
    </div>
  </div>
</div>

<div id="chris" class="coach hidden">
  <div class="lightwindow"></div>
  <div class="coach-box">
   <div class="coach-container">
    <h1 class="coach-heading">Steve</h1>
    <div class="image-container chris-img coach-img-sizing"></div>
    <div class="coach-text">
     <p>Text block on this coach.</p> 
    </div>
    <button class="coach-button">Close</button>
   </div>
 </div>
</div>

<!-- ********************************************** -->

<div class="enlarge">
  <div class="chris-img coach-img-sizing">
    <div class="coach-overlay">
      <h1 class="coach-name">Alice</h1>
    </div>
  </div>
</div>

<div id="chris" class="coach hidden">
  <div class="lightwindow"></div>
  <div class="coach-box">
   <div class="coach-container">
    <h1 class="coach-heading">Alice</h1>
    <div class="image-container chris-img coach-img-sizing"></div>
    <div class="coach-text">
     <p>Text block on this coach.</p> 
    </div>
    <button class="coach-button">Close</button>
   </div>
 </div>
</div>
0 голосов
/ 24 января 2019

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

.coach {
  display:none;
  /* more styling... */
}

Это происходит из-за приоритетов CSS.Когда DOM испытывает изменения и элемент визуализируется снова, он принимает оба CSS-класса и обрабатывает их.Но, поскольку оба класса (которые вы определяете для coach и -enable) находятся вместе, и оба пытаются настроить отображение на разные значения, правило, которое, наконец, обрабатывается.

Итак, чтобы исправить это, вам нужно упорядочить свои правила CSS следующим образом: 

.coach {
  display:none;
}

.-enable {
  display:block;
}

Таким образом, если присутствует -enable, это будет последний стильприменяется после применения .coach.

В этом отношении есть больше правил, например, если вы применяете стили CSS на основе идентификатора или имени элемента, существуют другие правила приоритета.Вы можете прочитать больше здесь

...