Question

我正在尝试通过显示带有名称的图像来在网页上显示教练库。我想启用一个弹出窗口onClick，通过切换CSS类.-enable {}来显示每个教练的更多信息，方法是使用关联的ID定位特定的容器div。我设置了html，以便通过切换该特定容器上的css类.enable来出现一个带有“关闭”按钮的弹出窗口。

我认为使用带参数的非常简单的函数来选择ID，然后在ID上切换类。在我的示例中，默认情况下，包装在第一个标记中的所有内容都是可见的，并且通过切换css类.-enable可以激活以下div。我的示例“ Chris”是一名教练，通过单击默认容器块，我激活了功能“ coachWindow（coach）”，并将“ Chris”作为参数传递给该函数，以选择ID为“ chris”的div并切换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 ID的

当我从控制台运行document.querySelector(chris).classList.toggle("-enable");时，会出现弹出框，但是通过功能coachWindow运行相同的ID会返回未定义和typeError结果。

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

Answer 1

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

 //unique count
string tempArr[10000];
int unique=0;
int oldWord=0;
for(int m=0; m<wordCount;m++ ) {
    for (int n = 0; n < wordCount; n++) {
        if (wordArr[m] == tempArr[n]) {


            oldWord = 1;
        }
    }
    if(oldWord==0){
        wordArr[m] = tempArr[n];
        unique++;
    }
    // reset the oldWord variable here
    oldWord=0;

}
cout << "Unique word count is: " << unique << endl;

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

因此，要解决此问题，您需要通过以下方式订购CSS规则：

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

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

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

Answer 2

这比您想象的要简单得多。首先，不要专注于id，因为这会使解决方案更加复杂和脆弱。如果您正确地构建HTML结构，则可以通过使用DOM .closest()和.nextElementSibling()方法定位相应的div并添加和删除预设的类来显示或隐藏相应的id与.classList.add and .classList.Remove。使用这种方法，<a>是什么（您甚至不需要使用它们）都没有关系，并且您可以随时添加/删除教练，而无需修改JavaScript。只需保持正确的HTML结构即可。

此外，请勿像使用click事件触发器那样使用click元素。仅在导航时使用它们，否则在语义上是不正确的。几乎所有可见元素都可以设置一个h1...h6事件，如下所示。同样，您可以将任何东西设置为看起来像任何东西的样式，因此即使非链接元素也可以看起来像链接或按钮之类。

说到语义，不要使用标题（h3），因为它们如何使文本看起来更好。实际上，永远不要使用任何HTML元素，因为它带有内置样式。使用正确的标签描述您的内容，然后使用CSS设置元素的样式。 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>

func

Javascript Function参数以html ID为目标并添加CSS类

2 个答案: