我在点击按钮时向'div'子项添加像素。当点击媒体时，它应该添加1px，当点击大时应添加2px。并且用户不允许两次点击相同的按钮，所以我取消绑定点击并再次绑定它，这应该发生在单击按钮时，我面临的问题，我无法在绑定后再绑定它背部。
以下是代码：
HTML：
<a id="small">Small</a>
<a id="medium">Medium</a>
<a id="large">Large</a>
<div>
<h1>lorem ipsum dolor sit</h1>
<p>lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit</p>
<h4>ipsum dolor sit lorem</h4>
</div>
jquery的：
$(document).ready(function(){
function inc(){
$("div").not("header div").not("footer div").children().each(function() {
var size = parseInt($(this).css("font-size"));
size = size + 2 + "px";
$(this).css({
'font-size': size
});
});
}
function med(){
$("div").not("header div").not("footer div").children().each(function() {
var size = parseInt($(this).css("font-size"));
size = size + 1 + "px";
$(this).css({
'font-size': size
});
});
}
function small(){
$("div").not("header div").not("footer div").children().each(function() {
var size = parseInt($(this).css("font-size"));
size = size + 0 + "px";
$(this).css({
'font-size': size
});
});
}
$("#large").on("click",function() {
inc();
$("#large").unbind("click");
$("#medium").bind("click",function(){
med();
});
$("#small").bind("click",function(){
small();
});
});
$("#medium").on("click",function() {
med();
$("#medium").unbind("click");
$("#large").bind("click",function(){
inc();
});
$("#small").bind("click",function(){
small();
});
});
$("#small").on("click",function() {
small();
$("#small").unbind("click");
$("#large").bind("click",function(){
inc();
});
$("#medium").bind("click",function(){
med();
});
});
});
答案 0 :(得分：0)
您可以使用不带绑定/解除绑定https://jsfiddle.net/vcoaqcoh/
的解决方案
$(document).ready(function(){
inc = function(){
$("div").not("header div").not("footer div").children().each(function() {
var size = parseInt($(this).css("font-size"));
size = size + 2 + "px";
$(this).css({
'font-size': size
});
});
}
med = function(){
$("div").not("header div").not("footer div").children().each(function() {
var size = parseInt($(this).css("font-size"));
size = size + 1 + "px";
$(this).css({
'font-size': size
});
});
}
small = function(){
$("div").not("header div").not("footer div").children().each(function() {
var size = parseInt($(this).css("font-size"));
size = size + 0 + "px";
$(this).css({
'font-size': size
});
});
}
$("#large").on("click",function() {
inc();
$("#large").addClass('removePointer');
$("#medium, #small").removeClass('removePointer');
});
$("#medium").on("click",function() {
med();
$("#medium").addClass('removePointer');
$("#large, #small").removeClass('removePointer');
});
$("#small").on("click",function() {
small();
$("#small").addClass('removePointer');
$("#large, #medium").removeClass('removePointer');
});
});.removePointer {
pointer-events: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="small">Small</a>
<a id="medium">Medium</a>
<a id="large">Large</a>
<div>
<h1>lorem ipsum dolor sit</h1>
<p>lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit</p>
<h4>ipsum dolor sit lorem</h4>
</div>
我使用了名为css的{{1}} 属性。
答案 1 :(得分：0)
如果您使用data属性，则会更加简单，请参阅下一个示例
$(document).ready(function(){
$('.changefont').on('click' , function(e){
e.preventDefault();
ChangeFontSize($(this).attr('id'));
});
});
function ChangeFontSize($vol){
$('div').children().not('[data-vol="'+$vol+'"]').each(function(){
var DataVol = $(this).data('vol'),
FontSize = parseInt($(this).css('font-size')),
FontReset = DataVol == "small" ? 0 : DataVol == "medium" ? -1 : DataVol == "large" ? -2 : 0,
FontChange = $vol == "small" ? 0 : $vol == "medium" ? 1 : $vol == "large" ? 2 : 0;
$(this).data('vol' , $vol);
$(this).css('font-size' , FontSize + FontReset + FontChange+'px');
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="changefont" id="small">Small</a>
<a class="changefont" id="medium">Medium</a>
<a class="changefont" id="large">Large</a>
<div>
<h1>lorem ipsum dolor sit</h1>
<p>lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit</p>
<h4>ipsum dolor sit lorem</h4>
</div>
说明：
1st：，而不是使用3个功能和3个点击事件，您只需使用1个功能，并为<a>按钮添加相同的类，并只使用一个点击事件
第二名：代码的作用是什么？它只是将data-vol属性添加到具有小，中，大音量的元素中..阅读下面代码中的注释
function ChangeFontSize($vol){ //pass volume of font here (small , medium or large) we will get this from the <a> id
$('div').children().not([data-vol="'+$vol+'"]).each(function(){ //loop through the children but its data-vol attribute not with the same vol of button (it will prevent the same vol to click again)
var DataVol = $(this).data('vol'), // get the data-vol from the element
FontSize = parseInt($(this).css('font-size')), // get the font size of the element
FontReset = DataVol == "small" ? 0 : DataVol == "medium" ? -1 : DataVol == "large" ? -2 : 0, // some shortcut if/else statement using the previous DataVol to reset the font size to its default
FontChange = $vol == "small" ? 0 : $vol == "medium" ? 1 : $vol == "large" ? 2 : 0; // get the value to increase it to the font
$(this).data('vol' , $vol); // change data-vol attribute with the new font volume
$(this).css('font-size' , FontSize + FontReset + FontChange+'px'); // finally change the font
});
}
最后你可以简单地将.not("header div").not("footer div")添加到此代码中，以使其按预期正常工作。我没有添加它以使我的示例易于理解
答案 2 :(得分：0)
我会避免绑定和取消绑定这样的事件处理程序。
如果你的目标是允许一种放大/缩小，那么添加像素并不是正确的方法。它没有保持＆＃34;宽高比＆＃34;不同的原始字体大小（h1，h4，...）。如果单击 medium 然后 large 并重复该序列100次，则会为字体大小添加300个像素，这将隐藏这些标题大小之间的差异。
相反，您可以更好地处理原始字体大小的百分比。
以下是使用滑块的方法：
$("#zoom").on("input", function () {
$("#pct").text(this.value);
$("#container").css({ fontSize: this.value + "%" });
});
$("#reset").on("click", function () {
$("#zoom").val(100).trigger("input");
});#zoom { display: block; width: 97%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="zoom" min="10" max="200" value="100">
<div><span id="pct">100</span>% <button id="reset">Reset</button></div>
<div id="container">
<h1>lorem ipsum dolor sit</h1>
<p>lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit</p>
<h4>ipsum dolor sit lorem</h4>
</div>