Question

我有一个在ESP8266上运行的简单网页，用CSS编写为HTML，同时启动了一些JavaScript。在此页面上有12个div，每个div带有一个“ 3位”导航丸。单击它们中的每一个都会将相应的值发送到服务器（ESP8266）。这部分效果很好。当用户加载此页面时，Web浏览器发送GET请求以获取这些值，并通过更改（“ highliting”）每个导航丸中的对应nav-item在网页上显示它们。.从服务器获取响应有效，但我不这样做不知道可以“访问”每个nav-pills类并更改其nav-item是很热门的。这是我正在谈论的代码：

$( document ).ready(function() {
     $('.nav-pills li:nth-child(1) a').tab('show'); 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 w-100 p-2" style="">
      <div class="card text-center shadow-none">
        <div class="card-header p-1">
          <h2 class="text-center shadow"><b class="text-center">Okno 1</b></h2>
        </div>
        <div class="card-body p-1">
          <a class="btn btn-primary m-1" style="color: white;" id="1" value="open" ><b>OTWÓRZ</b></a><a class="btn btn-primary m-1" style="color: white;" id="1" value="close" ><b>ZAMKNIJ</b></a><a class="btn btn-primary m-1" style="color: white;" id="1" value="stop" ><b>STOP</b><br></a> </div>
        <div class="card-body p-1">
          <div class="progress">
            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 100%">!!!</div>
          </div>
          <h4 class="pt-2 shadow-none">Tryb pracy<br></h4>
          <ul class="nav nav-pills m-0 text-center w-100" style="">
           <li class="nav-item" id="1" value="czas"> <a href=""  class="nav-link" data-toggle="pill">Czas</a> </li>
            <li class="nav-item" id="1" value="reczny"> <a href="" class="nav-link"  data-toggle="pill">Ręczny</a> </li>
            <li class="nav-item" id="1" value="swiatlo"> <a href=""  class="nav-link" data-toggle="pill">Światło</a> </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-lg-3 p-2 w-100" style="">
      <div class="card text-center shadow-none">
        <div class="card-header p-1">
          <h2 class="text-center shadow"><b class="text-center">Okno 2</b></h2>
        </div>
        <div class="card-body p-1">
          <a class="btn btn-primary m-1" style="color: white;" id="2" value="open" ><b>OTWÓRZ</b></a><a class="btn btn-primary m-1" style="color: white;" id="2" value="close" ><b>ZAMKNIJ</b></a><a class="btn btn-primary m-1" style="color: white;" id="2" value="stop" ><b>STOP</b><br></a> </div>
        <div class="card-body p-1">
          <div class="progress">
            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 100%">!!!</div>
          </div>
          <h4 class="pt-2">Tryb pracy<br></h4>
          <ul class="nav nav-pills m-0 text-center w-100" style="">
            <li class="nav-item" id="2" value="czas"> <a href=""  class="nav-link" data-toggle="pill">Czas</a> </li>
            <li class="nav-item" id="2" value="reczny"> <a href="" class="nav-link"  data-toggle="pill">Ręczny</a> </li>
            <li class="nav-item" id="2" value="swiatlo"> <a href=""  class="nav-link" data-toggle="pill">Światło</a> </li>
          </ul>
        </div>
      </div>
    </div>

这对于一个导航栏很正常，但是我如何遍历全部12个导航栏并能够分别设置其导航项？在这12种导航丸中，每一种都应只有一个处于活动状态（突出显示）...

Page screenshot

我添加了此页面的屏幕快照，以直观地看到它的外观。 “ Tryb pracy”下方的每个导航丸都用作每个卡的模式选择器。

Answer 1

这并不是您所要求的，但是它显示了如何仅将JavaScript事件应用于一个特定的导航丸

$( document ).ready(function() {

  $('.nav-item').mouseover(function() {
     $(this).addClass('highlight');
  });
  
  $('.nav-item').mouseout(function() {
     $(this).removeClass('highlight');
  });
});

.highlight {
background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills m-0 text-center w-100" style="">
    <li class="nav-item" id="pill-1" value="czas"> <a href=""  class="nav-link" data-toggle="pill">Czas</a> </li>
    <li class="nav-item" id="pill-2" value="reczny"> <a href="" class="nav-link"  data-toggle="pill">Ręczny</a> </li>
    <li class="nav-item" id="pill-3" value="swiatlo"> <a href=""  class="nav-link" data-toggle="pill">Światło</a> </li>
    </ul>

Answer 2

我通过在每个类“ nav-pills”中添加另一个类来完成这项工作，就像这样：

<ul class="nav nav-pills m-0 text-center w-100 mode-1" style="">
           <li class="nav-item" id="1" value="czas"> <a href=""  class="nav-link" data-toggle="pill">Czas</a> </li>
            <li class="nav-item" id="1" value="reczny"> <a href="" class="nav-link"  data-toggle="pill">Ręczny</a> </li>
            <li class="nav-item" id="1" value="swiatlo"> <a href=""  class="nav-link" data-toggle="pill">Światło</a> </li>
          </ul>
<ul class="nav nav-pills m-0 text-center w-100 mode-2" style="">
           <li class="nav-item" id="1" value="czas"> <a href=""  class="nav-link" data-toggle="pill">Czas</a> </li>
            <li class="nav-item" id="1" value="reczny"> <a href="" class="nav-link"  data-toggle="pill">Ręczny</a> </li>
            <li class="nav-item" id="1" value="swiatlo"> <a href=""  class="nav-link" data-toggle="pill">Światło</a> </li>
          </ul>

然后我可以在for（）循环中进行迭代：

var index;
var ilosc_okien = request.responseXML.getElementsByTagName("tryb").length; 
 for (index = 0; count < ilosc_okien; count++) {
       if (request.responseXML.getElementsByTagName('tryb')[index].childNodes[0].nodeValue === "czas") {
      $('.mode-' +[index+1]+' li:nth-child(1) a').tab('show');
       }// end if == czas

        if (request.responseXML.getElementsByTagName('tryb')[index].childNodes[0].nodeValue === "reczny") {
    $('.mode-' +[index+1]+' li:nth-child(2) a').tab('show');
       }// end if == reczny

       if (request.responseXML.getElementsByTagName('tryb')[index].childNodes[0].nodeValue === "swiatlo") {
    $('.mode-' +[index+1]+' li:nth-child(3) a').tab('show');
       }// end if == swiatlo
     }// end for loop

也许不是很漂亮，但是可以完成工作。谢谢大家：）

如何在类似的三个一组中选择特定元素？

2 个答案: