Question

这是我的代码段：

＆＃13;

 $(document).ready(function(){
    	$(".class").on("click",function(){
    	$("#transform").removeClass();
    	$("#transform").addClass("circle");
    	})
    })

＆＃13;

 .circle { 
    	width: 100px; 
    	height: 100px; 
    	background: red; -moz-border-radius: 50px; 
    	-webkit-border-radius: 50px; border-radius: 50px; 
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column">
            <div id="transform">Transform me</div>
    </div>

＆＃13;

我想使用css和js将我的div变成一个圆圈，但它不适用于我的结尾。

Answer 1

试试这段代码。这符合您的要求我想。

  $(document).ready(function() {
    $('.click').on('click', function(){
      $("#transform").toggleClass('circle');
    })   
  })

#transform {
    width: 100px; 
    height: 100px; 
    display: inline-blick;
    background: red;
    transition: all 0.3s ease;
}
.circle {
  border-radius: 50px; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; border-radius: 50px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="column">
    <div id="transform"></div>
    <button class='click'>Click</button>
</div>

您可以使用toggleClass代替addClass和removeClass。

Answer 2

尝试使用以下代码。您正在删除代码中的转换ID。

//front-end code
<div class="column">
        <div   class="transform obj">Transform me</div>
</div>

//css 
.circle { 
    width: 100px; 
    height: 100px; 
    background: red; -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; border-radius: 50px; 
}

//js
$(document).ready(function(){
    $(".class").on("click",function(){
      $(".obj").removeClass('transform');
      $(".obj").addClass("circle");
    });
});

使用css转换div

2 个答案: