我有个问题。我需要下面的函数来分别处理具有相同类的 div。现在我为基本相同的事情设置了单独的课程:(
我的代码:
<div class="selectDiv type">
<span class="selectDefaultType"></span>
<select name="txtType" class="selectBoxType">
<option class="defaultTextType">IZVĒLIES VEIDU</option>
<option value="1">Bārs</option>
<option value="2">Nav bārs</option>
</select>
</div>
<div class="selectDiv place">
<span class="selectDefaultPlace"></span>
<select name="txtPlace" class="selectBoxPlace">
<option class="defaultTextPlace">IZVĒLIES PILSĒTU</option>
<option value="1">Abkhazia</option>
<option value="2">Afghanistan</option>
</select>
</div>
<script>
var defaultTextPlace = $('.defaultTextPlace').text();
$('.selectDefaultPlace').text(defaultTextPlace);
$('.selectBoxPlace').on('change', function () {
var defaultTextPlaceUpdated = $('.selectBoxPlace').find(":selected").text();
$('.selectDefaultPlace').text(defaultTextPlaceUpdated);
});
var defaultTextType = $('.defaultTextType').text();
$('.selectDefaultType').text(defaultTextType);
$('.selectBoxType').on('change', function () {
var defaultTextTypeUpdated = $('.selectBoxType').find(":selected").text();
$('.selectDefaultType').text(defaultTextTypeUpdated);
});
</script>
<style>
.selectDiv {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100%;
height: 50px;
line-height: 50px;
overflow: hidden;
background: url('narvesen/img/openSelect.jpg') no-repeat right #f0f0f0;
margin: 10px 0;
padding: 0px;
position: relative;
z-index: 100;
cursor: pointer;
font-size: 14px;
font-family:'Arimo', sans-serif;
}
.selectDefaultPlace, .selectDefaultType {
text-align: center;
display: inline-block;
width: 100%;
margin-left: -25px;
font-size: 14px;
font-family:'Arimo', sans-serif;
text-transform: uppercase;
}
.selectDiv select {
margin: 0px;
padding: 0px;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 101;
cursor: pointer;
}
.selectDiv select:focus {
outline: none;
}
</style>
我仍在学习 jQuery,因此非常感谢任何帮助!