点击后更改<p>尺寸

时间:2016-09-15 15:52:29

标签: javascript jquery html

我正在尝试增加{ "applicationDirectory":null, "applicationStorageDirectory":null, "dataDirectory":null, "cacheDirectory":null, "externalApplicationStorageDirectory":null, "externalDataDirectory":null, "externalCacheDirectory":null, "externalRootDirectory":null, "tempDirectory":null, "syncedDataDirectory":null, "documentsDirectory":null, "sharedDirectory":null } 元素的大小,目前我有代码,但此代码会更改页面中所有mToolbar = (Toolbar) findViewById(R.id.toolbar); 元素的大小,我想要的是让用户自由地改变他想要的元素的大小。所以我的问题是:我怎么能这样做?目前这就是我所拥有的:

&#13;
&#13;
<p>
&#13;
<p>
&#13;
$("p").click(function() {
  var fontSize = parseInt($(this).css("font-size"));
  fontSize = fontSize + 1 + "px";
  $('p').css({
    'font-size': fontSize
  });
});

$('#reset').click(function() {
  var fontSize = "8px";
  $('p').css({
    'font-size': fontSize
  });
});
&#13;
&#13;
&#13;

6 个答案:

答案 0 :(得分:1)

要更改所单击的<p>的字体大小,请尝试以下操作:

$("p").click(function() {
    var fontSize = parseInt($(this).css("font-size"));
    fontSize = fontSize + 1 + "px";
    $(this).css({'font-size':fontSize});
});

答案 1 :(得分:1)

变化:

$(this).css

为:

$(this)

<p>引用被点击的$('p'),而不是选择所有段落的{{1}}。

答案 2 :(得分:1)

而不是$('p'),您必须使用$(this)。因为$('p')引用了dom的所有<p>标记,而$(this)将引用了已被点击的标记。请查看下面的代码段。

$("p").click(function() {
    var fontSize = parseInt($(this).css("font-size"));
    fontSize = fontSize + 1 + "px";
    //In below line $(p) replaced with $(this)
    $(this).css({'font-size':fontSize});
});

$('#reset').click(function () {
  var fontSize = "8px";
  $('p').css({'font-size':fontSize});
});
p {
  font-size: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>


<button id="reset">Reset</button>

答案 3 :(得分:0)

您可以使用'p'关键字仅定位触发事件的元素,而不是定位this(选择具有给定标记名称的所有元素)。

$("p").click(function() {
    var fontSize = parseInt($(this).css("font-size"));
    fontSize = fontSize + 1 + "px";
    $(this).css({'font-size':fontSize});
  
    //console.log(this);
});

$('#reset').click(function () {
  var fontSize = "8px";
  $('p').css({'font-size':fontSize});
});
p {
  font-size: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>


<button id="reset">Reset</button>

答案 4 :(得分:0)

我认为这应该很简单:

 $('p').css({'font-size':fontSize}); 

应该是

  $(this).css({'font-size':fontSize});

答案 5 :(得分:0)

&#13;
&#13;
<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
p{
	cursor: pointer;
	font-size: 12px;
}

</style>

<body>
<h1>Do it on click</h1>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>

<button id="reset">Reset</button>

</body>

<script type="text/javascript">



$("p").click(function(){//fire the function when click on any p element
   var thefontsize = parseInt($(this).css("font-size"));//get the current font size
   thefontsize = thefontsize+2;//increase the font size for each click
   $(this).css({"font-size":thefontsize+"px"}); //this keyword only focus on the element which user clicke, no all the elements.
});

$("#reset").click(function(){
	$("p").css({"font-size":"12px"});
});

</script>

</html>
&#13;
&#13;
&#13;