我有两个类似的HTML块(一个用于新闻,第二个用于特殊优惠),它们在底部都有分页按钮,所以我尝试构建一个通用函数来更改分页按钮状态(活动/不活动)为每个块独立,但我失败了。这就是问题所在。我该怎么做?使用jQuery独立更改两个类似元素的CSS类
这里是的jsfiddle:http://jsfiddle.net/iamsvyat/5TjKQ/
HTML:
<div id="news-block">News Block</div>
<div class="pag-circles">
<button class="pag-circle-1 active"> </button>
<button class="pag-circle-2 inactive"> </button>
<button class="pag-circle-3 inactive"> </button>
<button class="pag-circle-4 inactive"> </button>
</div>
<div id="special-offers-block">Special Offers Block</div>
<div class="pag-circles">
<button class="pag-circle-1 active"> </button>
<button class="pag-circle-2 inactive"> </button>
<button class="pag-circle-3 inactive"> </button>
<button class="pag-circle-4 inactive"> </button>
</div>
CSS:
button {
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 6px solid black;
border-radius: 6px;
}
.active {
border-color: red;
}
.inactive {
border-color: black;
}
button:focus {
outline: none;
}
button:active {
position: relative;
top: 1px;
}
jQuery的:使用事件德勒
$("#news-block").next(".pag-circles").children().click(function() {
//if the first button is clicked
//if the second button is clicked
//if the third button is clicked
//if the fourth button is clicked
});
$("#special-offers-block").next(".pag-circles").children().click(function() {
//if the first button is clicked
//if the second button is clicked
//if the third button is clicked
//if the fourth button is clicked
});
将按钮设置为同一类是否合理? – j08691