Question

我正在尝试增加{ "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;

<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;

Answer 1

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

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

Answer 2

变化：

$(this).css

为：

$(this)

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

Answer 3

而不是$('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>

Answer 4

您可以使用'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>

Answer 5

我认为这应该很简单：

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

应该是

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

Answer 6

＆＃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;

点击后更改<p>尺寸

6 个答案: