无法使用jQuery的CSS属性 [英] Unable to css property using jquery

问题描述

我正在尝试设置我的复选框的样式，该复选框在未选中的情况下向左移动，顶部有一个图像.单击该图像后，该元素位于level元素顶部.该图像应消失，使其向右移动.下面是我的代码.请任何人都可以向我提供所需的解决方案.预先感谢.

I am trying to style my checkbox, which on getting unchecked move to left with a image at the top.and once that image is clicked which is on top of the level element . The image should disappear making it move towards right.Below is my code. Please can anyone provide me the required solution. Thanks in advance.

<div class="slideOne">
   <input type="checkbox" value="None" id="slideOne" name="check" checked />
   <label for="slideOne">
       <a href="https://openclipart.org/detail/215532/thumbs-up">
           <img src="https://openclipart.org/download/215532/1425710397.svg" />
       </a>
   </label>
</div>

JQUERY文件

$('input[type=checkbox]').change(function(){
    var c       = this.checked ? 'hidden' : 'visible';
    var length  = $(".slideOne label").css("left");
    $('body').on('click','img',function(){
         $('.slideOne label').css('left','-3px !important');
    })        
    if(length == '37px'){
         $('img').css('visibility', c);
    }
});

CSS文件

.slideOne {
  width: 50px;height: 10px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideOne label {
  display: block;
  width: 16px;height: 16px;
  position: absolute;top: -3px;
  left: -3px;cursor: pointer;
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 9999;
}
.slideOne img {
  position: absolute;
  height: 16px;
  width: 16px;
  top: -3px;
  left: -4px;
  visibility: hidden;
}
.slideOne input[type=checkbox] {
  visibility: hidden;
}
.slideOne input[type=checkbox]:checked + label {
  left: 37px;
}

推荐答案

jQuery代码

$('input[type=checkbox]').change(function(){
   var c = this.checked ? 'hidden' : 'visible';
   var length=$(".slideOne label").css("left");
   $('body').on('click','img',function(){$('.slideOne label').css('left','-3px !important');})
  alert(c);
  $('.slideicon').css('visibility', c);});

HTML代码

<div class="slideOne">
<input type="checkbox" value="None" id="slideOne" name="check" checked />
<label for="slideOne"><a ><img class='slideicon' src="https://openclipart.org/download/215532/1425710397.svg" /></a></label>
 </div>

我已经更新了这些代码 我只是删除了jquery中长度的if条件，并为需要隐藏和显示的图像放置了一个类名

I have updated these codes i just removed the if condition for length in jquery and i have put a class name for the image that needed to hide and show

我没有更改CSS上的任何内容

i didn't change any thing on css

供参考

https://jsfiddle.net/jasonantho/5eutv0vw/

我希望我能满足您的需求和问题

I hope i fulfilled your need and issue

谢谢

这篇关于无法使用jQuery的CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！