Javascript 函数参数指向 html ID 并添加 CSS Class

Question

我正在尝试通过显示带有名称的图像来在网页上显示教练图库。我想启用一个弹出窗口 window onClick，它将通过切换 CSS class 来显示每个教练的更多信息。-通过使用定位特定容器 div 来启用 {}他们的关联 ID。我设置了 html，因此通过在该特定容器上切换 css class .enable，会出现带有 "close" 按钮的弹出窗口 window。

我想使用一个非常简单的函数和一个参数到 select id，然后在 id 上切换 class。在我的示例中，第一个标签中包含的所有内容在默认情况下都是可见的，并且通过切换 css class .-enable 来激活以下 div 。我的示例 "Chris" 是一个教练，通过单击默认容器块，我激活函数 "coachWindow(coach)" 并将 "Chris" 作为函数中的参数传递给 select div 使用 ID "chris" 并切换 CSS class。

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 ID

当我从控制台运行 document.querySelector(chris).classList.toggle("-enable"); 时，会出现弹出框，但是运行通过函数 coachWindow returns 未定义和 typeError 结果显示相同的 id。

如何编写我的函数以便我可以传递任何教练 ID 并显示相应教练的弹出窗口 window？

Answer 1

我认为您的代码不完整，因为我看不到使您的 div 隐藏的 css 样式。我认为它是这样的：

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

发生这种情况是因为 CSS 优先级。当 DOM 发生变化并且元素再次呈现时，它需要 CSS 类并处理它们。但是，由于类（您为 coach 和 -enable 定义的）都在一起并且都尝试将显示设置为不同的值，因此最后的规则被处理。

因此，为了解决这个问题，您需要按以下方式订购 CSS 规则：

.coach {
  display:none;
}

.-enable {
  display:block;
}

这样，如果存在 -enable，它将是应用 .coach 后应用的最后一个样式。

关于此的规则更多，例如，如果您根据 ID 或元素名称应用 CSS 样式，则有不同的优先级规则。你可以阅读更多here

Answer 2

这比你想象的要简单得多。首先，不要关注 ids，因为这会导致更复杂和脆弱的解决方案。如果您的 HTML 结构正确，只需使用 DOM .closest() and .nextElementSibling() methods and then adding and removing a pre-set class with .classList.add and .classList.Remove 定位显示或隐藏适当的 div 即可。使用这种方法，id 是什么并不重要（您甚至不需要使用它们）并且您可以随时 add/remove 教练而无需修改 JavaScript.只要保持正确的 HTML 结构即可。

此外，不要将 <a> 元素用作 click 事件触发器。仅在导航时使用它们，否则在语义上是不正确的。正如您将在下面看到的，几乎任何可见元素都可以在其上设置 click 事件。同样，您可以将任何样式设置为看起来像任何东西，因此即使 non-link 元素也可以看起来像链接或按钮或其他任何东西。

说到语义，不要使用标题 (h1...h6)，因为它们使文本看起来很糟糕。事实上，永远不要使用任何 HTML 元素，因为它带有 built-in 样式。使用正确的标签来描述您的内容，然后使用 CSS 来设置元素的样式。 h3 只能用于描述层次结构中第三个 sub-level 的内容。这意味着它们应该只显示为 h2 的 children 并且 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>

Javascript 函数参数指向 html ID 并添加 CSS Class

Javascript Function parameter to target html ID and add CSS Class

javascript

onclick

css-selectors

jquery-selectors