IF声明在click事件的jQuery回调函数中不起作用

Question

I have some <div> and its padding-left have to be modified when left or right button is clicked. 我有一些<div> ，单击左或右键时必须修改其padding-left 。 I want change font-weight and font-style according to the padding-left of each selected element. 我想根据每个选定元素padding-left来更改font-weight和font-style 。 If padding-left is 20, the font-weight will be set with normal . 如果padding-left为20，则将font-weight设置为normal 。 And its font-style will be assigned with italic when padding-left is 40. 当padding-left为40时，其font-style将用italic指定。

  $(document).ready(function () { $(".toGrab").on("click", function () { $(this).toggleClass('selected'); }); $("#key").click(function () { var sl = parseInt($(".selected").css("padding-left")); $(".selected").css({ paddingLeft: "+=" + "20" }); if (sl >= '100') { $(".selected").css({ paddingLeft: 100 }); } }); $("#key1").click(function () { $(".selected").css({ paddingLeft: "-=" + "20" }); }); $(document).ready(function () { $("#key").click(function () { var n = $(".toGrab").css("padding-left"); if (n < 20) { $(".toGrab").css("font-weight", "normal"); alert("n"); } if (n < 40) { $(".toGrab").css("font-weight", "italic"); alert("n"); } else { $(".toGrab").css("font-weight", "bold"); } }); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> div{ background-color:yellow; margin-top:20px; } div { } .selected { background-color:lightblue; } </style> </head> <body> <button id="key">left</button> <button id="key1">right</button> <div class='toGrab'>grand parent</div> <div class='toGrab'>parent</div> <div class='toGrab'>child</div> <div class='toGrab'>child</div> <div class='toGrab'>child</div>

the padding-left changes when select the div and click the left button 选择div并单击向左按钮时，向左填充会更改

Answer 1

Some suggestion and revised codes as following for you. 以下是一些建议和修改后的代码。

italic belongs to font-style instead of font-weight . italic属于font-style而不是font-weight 。
Why it doesn't work changing CSS styles is that you override $("#key").click(function(){ // Here }) and did not give the same code in $("#key1").click(function(){ // Here }) 为什么更改CSS样式不起作用，是因为您覆盖了$("#key").click(function(){ // Here })而没有在$("#key1").click(function(){ // Here })
$(".toGrab") returns an Array of matched jQuery elements so that you have to execute $(".toGrab").each(function(){ // $(this) will be the each element of the Array. }) . $(".toGrab")返回匹配的jQuery元素数组，因此您必须执行$(".toGrab").each(function(){ // $(this) will be the each element of the Array. }) 。

  $(document).ready(function () { $(".toGrab").on("click", function () { $(this).toggleClass('selected'); }); $("#key").click(function () { var sl = parseInt($(".selected").css("padding-left")); sl = sl >= 100 ? "100" : "+=20"; $(".selected").css({ "padding-left": sl }); $(".toGrab.selected").each(function() { var paddingLeft = parseInt($(this).css("padding-left")); var isPaddingLeft20 = paddingLeft === 20; var isPaddingLeft40 = paddingLeft === 40; if(isPaddingLeft20) $(this).css("font-weight", "normal"); else if(isPaddingLeft40) $(this).css("font-style", "italic"); else $(this).css("font-weight", "bold"); }); }); $("#key1").click(function () { $(".selected").css({ "padding-left": "-=" + "20" }); $(".toGrab.selected").each(function() { var paddingLeft = parseInt($(this).css("padding-left")); var isPaddingLeft20 = paddingLeft === 20; var isPaddingLeft40 = paddingLeft === 40; if(isPaddingLeft20) $(this).css("font-weight", "normal"); else if(isPaddingLeft40) $(this).css("font-style", "italic"); else $(this).css("font-weight", "bold"); }); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <style> div{ background-color:yellow; margin-top:20px; } div { } .selected { background-color:lightblue; } </style> </head> <body> <button id="key">left</button> <button id="key1">right</button> <div class='toGrab'>grand parent</div> <div class='toGrab'>parent</div> <div class='toGrab'>child</div> <div class='toGrab'>child</div> <div class='toGrab'>child</div>

IF声明在click事件的jQuery回调函数中不起作用

问题描述

1 个解决方案

解决方案1
3 2016-07-02 12:43:18

IF声明在click事件的jQuery回调函数中不起作用

问题描述

1 个解决方案

解决方案1 3 2016-07-02 12:43:18

解决方案1
3 2016-07-02 12:43:18