时间戳

首页 > 解决方案 > 语法紧急只有一行| jQuery

jquery - 语法紧急只有一行| jQuery

问题描述

编辑以提供更多代码：

jQuery(function($){
  $(document).on('change', 'select[name="location"]', function(){
if ($(this).val() !== '') {
  $(".ea-standard form div.step").show(); //show all
  $(".ea-standard form div.step").not(':eq(1)').hide(); //then hide some
  $("#location-icon-jquery i").removeClass( "current-icon-yellow" ).addClass("active-icon-green");
    $("#hospital-icon-jquery i").addClass("current-icon-yellow");
} } ) } );

jQuery(function($){
  $(document).on('change', 'select[name="service"]', function(){
if ($(this).val() !== '') {
  $(".ea-standard form div.step").show(); //show all
  $(".ea-standard form div.step").not(':eq(2)').hide(); //then hide some
  $("#hospital-icon-jquery i").removeClass( "current-icon-yellow" ).addClass("active-icon-green");
   $("#doctor-icon-jquery i").addClass("current-icon-yellow");
} } ) } );

jQuery(function($){
$( '<div class="container"><div class="row icon-appointment"> <span class="col-md-2" id="location-icon-jquery"> <i class="fas fa-map-marker-alt current-icon-yellow"></i> </span> <span class="col-md-2" id="hospital-icon-jquery"> <i class="fas fa-hospital cc_cursor" ></i> </span> <span class="col-md-2"> <i class="fas fa-user-md" id="doctor-icon-jquery"></i> </span> <span class="col-md-2"> <i class="far fa-calendar-alt"></i> </span> <span class="col-md-4"> <i class="far fa-calendar-check"></i> </span></div></div>' ).insertBefore( ".ea-standard" );
} );

说得更清楚：

'<div class="container">
<div class="row icon-appointment">
 <span class="col-md-2" id="location-icon-jquery"> 
<i class="fas fa-map-marker-alt current-icon-yellow">
</i> 
</span>
 <span class="col-md-2" id="hospital-icon-jquery">
 <i class="fas fa-hospital cc_cursor" >
</i> 
</span>
 <span class="col-md-2">
 <i class="fas fa-user-md" id="doctor-icon-jquery">
</i>
 </span> 
<span class="col-md-2">
 <i class="far fa-calendar-alt">
</i>
 </span> 
<span class="col-md-4">
 <i class="far fa-calendar-check">
</i> 
</span>
</div>
</div>

编辑评论：

jQuery(function($){
var spans = $('.icon-appointment span');
spans.on("click", function () {
   var currentSpan = $(this);
   var prevIndex = currentSpan.index() - 1;
   var prevSpan = spans.eq(prevIndex);
   console.log(prevSpan.hasClass('active-icon-green'));
   if (prevSpan.hasClass('active-icon-green') !== true) { 
       alert("you must fill previous step");
   }
});
} );

编辑：

jQuery(function($){
    $('.icon-appointment span').click(function() {
  var self   = $(this),
      index  = self.index()-1
  if (($(this):eq(index)).hasClass('active-icon-green')) {
do something

我很抱歉这个不常见的问题标题，但我的问题正是这个。

  if ($(this):eq(index).hasClass('active-icon-green')) {

我有上面的 jquery 代码行。指数指：

   $('.icon-appointment span').click(function() {
  var self   = $(this),
      index  = self.index()-1

所以我想检查点击span之前的一个是否有。 span under icon-appointment classactive-icon-green class

我的 js 代码编辑器说：

在此处输入图像描述

那么真正的语法是什么？谢谢

标签： jquery

解决方案

您的代码中有语法错误。您正在使用“CSS Selector”语法而不是方法。另一个问题是您期望 $(this) 是所有跨度，而它只是您单击的跨度。

var spans = $('.icon-appointment span');
spans.on("click", function () {
   var currentSpan = $(this);
   var prevIndex = currentSpan.index() - 1;
   var prevSpan = spans.eq(prevIndex);
   console.log(prevSpan.hasClass('active-icon-green'));
});

现在，如果它们是 HTML 中的兄弟姐妹，您可以使用 prev()

var spans = $('.icon-appointment span');
spans.on("click", function () {
   var currentSpan = $(this);
   var prevSpan = currentSpan.prev();
   console.log(prevSpan.hasClass('active-icon-green'));
});

在第四次编辑之后......

这门课<i>不在跨度上。所以你需要看看<i>

var prevSpan = spans.eq(prevIndex);
var prevIcon = prevSpan.next("i");
console.log(prevIcon.hasClass('active-icon-green'));

推荐阅读