通过 css 和 ::focus 嵌套选择答案

【问题标题】：Nested selection via css and ::focus通过 css 和 ::focus 嵌套选择
【发布时间】：2019-12-12 14:59:50
【问题描述】：

请问，有没有办法在selectize-input类的div元素处于焦点时，使用css来选择helpTextInvalid类？

 <html>
  <head>
    <body>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">               
            </script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js">               
            </script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
      <form id="select1-selectBloco" autocomplete="off" class="form-group shiny-input-container" style="padding-top:5px; width:100%; height:64px;">
        <label style="width:100%" class="labelCustom">
          <div class="selectize-control demo inputSelect single">
              <div class="selectize-input items not-full has-options" style="min-height: 34px;">
              <input type="select-one" autocomplete="off" tabindex="" id="select1-selectInput-selectized" style="width: 4px;">
              </div>
         </div>
          <span id="select1-selectValidHelp" class="helpTextValid">Select an option 1.</span>  
          <span id="select2-selectValidHelp" class="helpTextInvalid">Select an option 2.</span> 
      </label>
    </form>
    <script>
            $('#select1-selectInput').selectize({});
    </script>
  </body>
</head>
</html>

提前谢谢你！

【问题讨论】：

您好，您的示例中没有 select-input 类的元素，您能否详细解释一下您要做什么？
你好。修复了错误，类是selectize-input。

标签： javascript css focus

【解决方案1】：

你可以使用 jQuery 的 .focusin() 函数： https://api.jquery.com/focusin/

$(".selectize-input").focusin(function() {
  $('#select1-selectInput').selectize({});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <body>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">               
            </script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js">               
            </script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
      <form id="select1-selectBloco" autocomplete="off" class="form-group shiny-input-container" style="padding-top:5px; width:100%; height:64px;">
        <label style="width:100%" class="labelCustom">
          <div class="selectize-control demo inputSelect single">
              <div class="selectize-input items not-full has-options" style="min-height: 34px;">
              <input type="select-one" autocomplete="off" tabindex="" id="select1-selectInput-selectized" style="width: 4px;">
              </div>
         </div>
          <span id="select1-selectValidHelp" class="helpTextValid">Select an option 1.</span>  
          <span id="select2-selectValidHelp" class="helpTextInvalid">Select an option 2.</span> 
      </label>
    </form>
  </body>
</head>
</html>

【讨论】：