Heim > Artikel > Web-Frontend > jQuery imitiert den Beispielcode für den Auswahleffekt von Optionsfeldern

jQuery imitiert den Beispielcode für den Auswahleffekt von Optionsfeldern

怪我咯Original: 2017-03-31 09:33:291630Durchsuche

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 25edfb22a4f469ecb59f1190150159c6 ü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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Diskussion über das Implementierungsprinzip der Erweiterung des jQuery-Plug-InsNächster Artikel：Eine kurze Diskussion über das Implementierungsprinzip der Erweiterung des jQuery-Plug-Ins

In Verbindung stehende Artikel

Mehr sehen