javascript - 检查选择器是否为真在 javascript 中无法正常工作

标签 javascript jquery html css if-statement

我在 HTML 中有几个包含不同背景图像的 div。如果你点击一个 div，会有一个选择器，它会被设置为 true。例如，我有一个 div“jogging”，如果我单击它，背景图像会从黑色变为橙色，并且选择器 jogging_selected 将设置为 true。

到目前为止一切顺利。现在我做了一个下一步按钮 (#button_step3)，如果选择了其中一个 div，它应该将这部分的显示标签设置为无，但仅限于此。

它总是转到“else-part”，即使有一个 true 的选择器，我真的不明白为什么。

更新

我添加了 console.log(jogging_selected);到 if 查询的 else 部分，他实际上记录了 false。我真的不明白为什么，因为如果我重新单击 div，他会变回黑色，并且只有当选择器为真时他才会这样做。

这是我的 javascript、CSS 和 HTML 代码(我将其分解为相关部分):

$(document).ready(function() {    
      
  var jogging_selected = false;
  var soccer_selected = false;
  var tennis_selected = false;
  var golf_selected = false;
    	
  function setBackgroundAndSelector(childnumber, imagepath_black, imagepath_orange, activity_selector){
    if(activity_selector){
      $(childnumber).css( "background", imagepath_black)
    }
    else{
      $(".image_activitys:nth-child(1)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging)" );
      $(".image_activitys:nth-child(2)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer)" );
      $(".image_activitys:nth-child(3)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis)" );
      $(".image_activitys:nth-child(4)").css( "background", "url(http://dummyimage.com/128x128/000000/fff.png&text=Golf)" );
      jogging_selected = false;
      soccer_selected = false;
      tennis_selected = false;
      golf_selected = false;
      for(i=1; i<5; i++){
        if('.image_activitys:nth-child('+i+')' == childnumber){
          $(childnumber).css( 'background', imagepath_orange );
        }
      }
      activity_selector = true;
    }
    activity_selector = !activity_selector
   }
      
   $(".image_activitys:nth-child(1)").click(function () {
    setBackgroundAndSelector(".image_activitys:nth-child(1)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Jogging)", jogging_selected);
   });
    	
   $(".image_activitys:nth-child(2)").click(function () {
    setBackgroundAndSelector(".image_activitys:nth-child(2)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Soccer)", soccer_selected);
  });
    	
  $(".image_activitys:nth-child(3)").click(function () {
    setBackgroundAndSelector(".image_activitys:nth-child(3)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Tennis)", tennis_selected);
  });
    	
  $(".image_activitys:nth-child(4)").click(function () {
    setBackgroundAndSelector(".image_activitys:nth-child(4)", "url(http://dummyimage.com/128x128/000000/fff.png&text=Golf)", "url(http://dummyimage.com/128x128/ff9900/fff.png&text=Golf)", golf_selected);
  });
      
      
  // This is the function which does not work properly
      
  $("#button_step3").click(function() {
    if(jogging_selected || soccer_selected  || tennis_selected  || golf_selected){
      $("#wrapper_fitcalc_content_step2" ).css( "display", "none" );
      $("#wrapper_fitcalc_content_step3" ).css( "display", "block" );
    }
    else{
      window.scrollTo(0, 0);
      alert("Please select a sport");
      console.log(jogging_selected);
    }
  });
});
.image_activitys{
	margin: 5px;
	width: 128px;
	height: 128px;
}

.image_activitys:nth-child(1){
  background:url(http://dummyimage.com/128x128/000000/fff.png&text=Jogging); 
}
.image_activitys:nth-child(1):hover{
  background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Jogging) !important;
  cursor: pointer;
}
.image_activitys:nth-child(2){
  background:url(http://dummyimage.com/128x128/000000/fff.png&text=Soccer);
}
.image_activitys:nth-child(2):hover{
  background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Soccer) !important;
  cursor: pointer;
}
.image_activitys:nth-child(3){
  background:url(http://dummyimage.com/128x128/000000/fff.png&text=Tennis);
}
.image_activitys:nth-child(3):hover{
  background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Tennis) !important;
  cursor: pointer;
}
.image_activitys:nth-child(4){
  background:url(http://dummyimage.com/128x128/000000/fff.png&text=Golf);
}
.image_activitys:nth-child(4):hover{
  background:url(http://dummyimage.com/128x128/ff9900/fff.png&text=Golf) !important;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div id="wrapper_fitcalc_content_step2">
      
  <div class="image_activitys" title="Jogging"></div>
  <div class="image_activitys" title="Soccer"></div>
  <div class="image_activitys" title="Tennis"></div>
  <div class="image_activitys" title="Golf"></div>
          
  <!-- There are several more of this divs which I just deleted for my post -->
      
  <input type="button" value="to Step 3" id="button_step3"/>
      
</div>

也许你们明白为什么他总是转到 $("#button_step3").click(function(){} 中的 else 部分？

最佳答案

bool 类型的变量在函数中使用时按值使用，而不是按引用使用。 这里所做的是函数 setBackgroundAndSelector 的第四个参数按值传递 bool 变量。所以原始变量(jogging_selected,soccer_selected,tennis_selected,golf_selected)在函数执行后并没有有效改变，只是修改了一个副本。 这是一个替代解决方案:

var selection={jogging_selected: false,
soccer_selected :false;
tennis_selected : false;
golf_selected : false};
function setBackgroundAndSelector(childnumber, imagepath_black, imagepath_orange, activity_selector){
    if(selection[activity_selector]){
        $(childnumber).css( "background", imagepath_black)
    }
    else{
        $(".image_activitys:nth-child(1)").css( "background", "url(jogging_black.png)" );
        $(".image_activitys:nth-child(2)").css( "background", "url(soccer_black.png)" );
        $(".image_activitys:nth-child(3)").css( "background", "url(tennis_black.png)" );
        $(".image_activitys:nth-child(4)").css( "background", "url(golf_black.png)" );
        jogging_selected = false;
        soccer_selected = false;
        tennis_selected = false;
        golf_selected = false;
        for(i=1; i<5; i++){
            if('.image_activitys:nth-child('+i+')' == childnumber){
                $(childnumber).css( 'background', imagepath_orange );
            }
        }
        selection[activity_selector] = true;
    }
    selection[activity_selector]= !selection[activity_selector]
}

$(".image_activitys:nth-child(1)").click(function () {
    setBackgroundAndSelector(".image_activitys:nth-child(1)", "url(jogging_black.png)", "url(jogging_orange.png)", "jogging_selected");
});

$(".image_activitys:nth-child(2)").click(function () {
    setBackgroundAndSelector(".image_activitys:nth-child(2)", "url(soccer_black.png)", "url(soccer_orange.png)", "soccer_selected");
});

$(".image_activitys:nth-child(3)").click(function () {
    setBackgroundAndSelector(".image_activitys:nth-child(3)", "url(tennis_black.png)", "url(tennis_orange.png)", "tennis_selected");
});

$(".image_activitys:nth-child(4)").click(function () {
    setBackgroundAndSelector(".image_activitys:nth-child(4)", "url(golf_black.png)", "url(golf_orange.png)", "golf_selected");
});


// This is the function which does not work properly

$("#button_step3").click(function() {
    if(selection["jogging_selected"] || selection["soccer_selected"]  || selection["tennis_selected"]  || selection["golf_selected"]){
        $("#wrapper_fitcalc_content_step2" ).css( "display", "none" );
        $("#wrapper_fitcalc_content_step3" ).css( "display", "block" );
    }
    else{
        window.scrollTo(0, 0);
        alert("Please select a sport");
    }
});
});

关于javascript - 检查选择器是否为真在 javascript 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37456252/

上一篇：html - Bootstrap 3中如何为不同的设备设置不同的列

下一篇：html - CSS 不随 Django 更新

相关文章：

javascript - 如何从网页中隐藏包含特定单词的特定 HTML 元素？

javascript - 异步方法上的assert.throws

html - 响应式地将行翻转到 Bootstrap 网格中的列

javascript - replaceWith() 在 .hover() 中不起作用

html - CSS 焦点选择器在 IE8 和 IE9 中工作需要什么文档类型声明？

javascript - 如何将大数据传递给网络 worker

javascript - 为什么串联的 RequireJS AMD 模块需要加载程序？

javascript - 使用 Dom Elements 进行字符计数

javascript - Jquery 遍历表格并突出显示已更改的单元格

jquery - 如何将 Angular 变量传递到 jQuery 函数中

©2024 IT工具网  联系我们