jQuery imitiert den Beispielcode für den Auswahleffekt von Optionsfeldern-js-Tutorial-php.cn

jQuery imitiert den Beispielcode für den Auswahleffekt von Optionsfeldern

怪我咯

Freigeben： 2017-03-31 09:33:29

Original

1756 Leute haben es durchsucht

Ich habe gerade angefangen, jquery zu lernen. Es ist sehr mühsam, die Schaltflächen in einigen CSS-Formularen bei der Arbeit zu verschönern, also habe ich darüber nachgedacht, sie durch jquery zu ersetzen, jquery für checkbox Es ist sehr einfach, es ist ein einfacher Stilwechseleffekt, verwenden Sie einfach die toggleClass()-Methode.

Ich wusste vorher nie, wie man das Optionsfeld macht, denn wenn eines der Optionsfelder ausgewählt wird, müssen die Stile der anderen entfernt werden. Wenn sich die beiden Optionsfelder auf derselben Ebene befinden, verwenden siblings() Dann können Sie direkt andere Optionsfeldfelder finden und den Stil entfernen. Da sich meine Arbeit

im zirkulären Listenmodus befindet und jedes

über ein Optionsfeld verfügt, habe ich die nützliche Methode parent() in jquery nicht gefunden, sodass ich lange Probleme hatte.

CSS ist wie folgt:

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt: Egal was passiert, es kann nur ein Stil hinzugefügt und der Text aktiviert werden Mit dem Klick ändert sich auch die rechte Seite.

jQuery imitiert den Beispielcode für den Auswahleffekt von Optionsfeldern

Das obige ist der detaillierte Inhalt vonjQuery imitiert den Beispielcode für den Auswahleffekt von Optionsfeldern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!