jQuery는 라디오 버튼 선택 효과 예제 코드를 모방합니다.-JS 튜토리얼-php.cn

jQuery는 라디오 버튼 선택 효과 예제 코드를 모방합니다.

怪我咯

풀어 주다： 2017-03-31 09:33:29

원래의

1682명이 탐색했습니다.

checkbox

매우 쉽습니다. 간단한 스타일 전환 효과입니다. 간단히 전환 클래스() 메소드를 사용하세요.

라디오 버튼 상자 중 하나를 선택하면 두 라디오 버튼 상자가 동일한 경우 다른 버튼 상자의 스타일을 제거해야 하기 때문에 이전에는 라디오 버튼 상자를 어떻게 수행하는지 알 수 없었습니다. level, use siblings() 다른 라디오 버튼 상자를 직접 찾아 스타일을 제거할 수 있습니다. 내 작품 은 순환 목록 모드이고 각

에는 라디오 버튼이 있어서 jquery에서 유용한 parent() 메서드를 찾지 못해 오랫동안 애썼습니다.
css는 다음과 같습니다.

<!DOCTYPE html>
<html class="area">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>设置-收货地址</title>
<link rel="stylesheet" href="../css/app.css">
<script src="../js/jquery.js"></script>
//<![CDATA[
<script>
$(function(){
//改变样式同时改变右边的文字
$("span.zdy-icon-radio").click(function(){
$(this).addClass("active").text("默认地址")
.parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认");
});
})
//]]>
</script>
<style>
.bjsc-lf span{float: left;}
.bjsc-lf > span:last-child{line-height: 2.1rem;}
.zdy-icon-radio{display:block;width: 30%rem; height: 2.15rem;margin-right: 1rem;padding-left: 3.15rem;line-height: 2.15rem;
font-family:"微软雅黑";float: left;background:url(../img/checkRight.jpg) no-repeat;background-size: 2.1rem 2.1rem;;}
.bjsc-rt{float: right;}
.zdy-icon-radio.active{background: url(../img/checked.png) no-repeat;background-size: 2.1rem 2.1rem;color: #f08417;}
</style>
</head>
<body>
<p class="xp-content02">
<p class="tt02">
编辑地址
</p>
<p class="bianji-dizhi">
<p class="tt09">
<span>15354656536</span>
<span>苏定芳</span>
</p> 
<p class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</p>
<p class="bianji-shanchu mui-clearfix">
<p class="bjsc-lf mui-clearfix">
<span class="zdy-icon-radio active">默认地址</span>
</p>
<p class="bjsc-rt">
<span class="mui-icon mui-icon-compose"></span>编辑
<span class="mui-icon mui-icon-trash"></span>删除
</p>
</p>
</p>
<p class="greybg02"></p>
<p class="bianji-dizhi">
<p class="tt09">
<span>15354656536</span>
<span>苏定芳</span>
</p> 
<p class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</p>
<p class="bianji-shanchu mui-clearfix">
<p class="bjsc-lf">
<span class="zdy-icon-radio">设为默认</span> 
</p>
<p class="bjsc-rt">
<span class="mui-icon mui-icon-compose"></span>编辑
<span class="mui-icon mui-icon-trash"></span>删除
</p>
</p>
</p>
<p class="greybg02"></p>
<p class="bianji-dizhi">
<p class="tt09">
<span>15354656536</span>
<span>苏定芳</span>
</p> 
<p class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</p>
<p class="bianji-shanchu mui-clearfix">
<p class="bjsc-lf">
<span class="zdy-icon-radio">设为默认</span> 
</p>
<p class="bjsc-rt">
<span class="mui-icon mui-icon-compose"></span>编辑
<span class="mui-icon mui-icon-trash"></span>删除
</p>
</p>
</p>
<p class="greybg02"></p>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다. 어쨌든 하나의 스타일만 추가할 수 있으며 오른쪽에 텍스트가 추가됩니다. 클릭해도 변경됩니다.

위 내용은 jQuery는 라디오 버튼 선택 효과 예제 코드를 모방합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!