如果至少有一项没有应用特定样式,请执行某些操作

fcg9iug3  于 2021-09-13  发布在  Java
关注(0)|答案(3)|浏览(273)

这是一把提琴供参考https://jsfiddle.net/mc6jqtzr/
我需要能够填充 #date 仅当至少有一个 option 在上面的“选择”列表中,未应用样式(在本例中为“显示”特性)。
e、 g.最后一个 option 没有应用样式,因此 #date 应该得到填充。

var date = $("#date");

// Show the date only if there are open spots
if ($('.js-check-in-times option:visible').length === 0) {
  date.html('');  
} else {
  date.html('Working now.');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="check-in__select js-check-in-times" id="time" name="AptTime" required="" aria-required="true" aria-label="times filter">
  <option value="2021-07-28T08:15:00.000-04:00" data-group="2021-07-28" style="display: none;">08:15 AM</option>
  <option value="2021-07-28T08:30:00.000-04:00" data-group="2021-07-28" style="display: none;">08:30 AM</option>
  <option value="2021-07-28T08:45:00.000-04:00" data-group="2021-07-28" style="">08:45 AM</option>
</select>

<div id="date" style="font-size: 24px; color: red; font-family: sans-serif;"></div>
slwdgvem

slwdgvem1#

您可以在选项之间循环以获取隐藏选项的计数,然后根据显示消息来检查“隐藏总数”和“隐藏总数”选项是否相同。
演示代码:

var date = $("#date");
var count = 0;
$('.js-check-in-times option').each(function() {
  if ($(this).css("display") == "none") {
    count++;
  }
})
console.log(count)
// Show the date only if there are open spots
if ($('.js-check-in-times option').length === count) {
  date.html('');
} else {
  date.html('Working now.');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<select class="check-in__select js-check-in-times" id="time" name="AptTime" required="" aria-required="true" aria-label="times filter">
  <option value="2021-07-28T08:15:00.000-04:00" data-group="2021-07-28" style="display: none;">08:15 AM</option>
  <option value="2021-07-28T08:30:00.000-04:00" data-group="2021-07-28" style="display: none;">08:30 AM</option>
  <option value="2021-07-28T08:45:00.000-04:00" data-group="2021-07-28" style="">08:45 AM</option>
</select>

<div id="date" style="font-size: 24px; color: red; font-family: sans-serif;"></div>
sdnqo3pr

sdnqo3pr2#

您可以选择所有选项,然后获取样式属性并选中
检查样式是否为空

var date = $("#date");
var sel = $("#time");
var opts = sel.find("option");

for(var opt of opts) {
    if($(opt).attr("style") !== undefined && $(opt).attr("style") === "") {
        date.html("There's Element Haven't Style");
    } else {
        date.html('Working now.');
    }
}

检查是否仅显示可见选项及其样式

var date = $("#date");
var sel = $("#time");
var opts = sel.find("option");

for(var opt of opts) {
    if($(opt).css("display") !== "none" && $(opt).attr("style") !== undefined && $(opt).attr("style") === "") {
        date.html("There's Element Haven't Style");
    } else {
        date.html('Working now.');
    }
}
hgc7kmma

hgc7kmma3#

滤器 options 基于 style 属性
如果缺少样式属性,请与进行比较 null 而不是 '' ```
var date = $("#date");

// Show the date only if there are open spots
var optionsWithEmptyStyle = $('.js-check-in-times option').filter(function() {
return $(this).attr('style') === '';
});

if (optionsWithEmptyStyle.length === 0) {
date.html('');
} else {
date.html('Working now.');
}

相关问题