Bellow，当 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>
提前致谢!
最佳答案
您可以使用 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>关于javascript - 通过 css 和::focus 进行嵌套选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59307360/