gpt4 book ai didi

javascript - IF 语句在单击事件的 jQuery 回调函数中不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 22:56:38 24 4
gpt4 key购买 nike

我有一些 <div>及其 padding-left单击 按钮时必须进行修改。我要零钱font-weightfont-style根据padding-left每个选定的元素。如果padding-left是 20,font-weight将设置为 normal .及其font-style将分配给 italic什么时候padding-left是 40。

 $(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>

padding-left 在选中div点击左键时改变

最佳答案

一些建议和修改代码如下。

  1. italic 属于font-style 而不是font-weight
  2. 为什么更改 CSS 样式不起作用是因为您覆盖了 $("#key").click(function(){//Here }) 并且没有在中给出相同的代码$("#key1").click(function(){//这里 })
  3. $(".toGrab") 返回匹配的 jQuery 元素数组,因此您必须执行 $(".toGrab").each(function(){//$ (this) 将是数组的每个元素。})

 $(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>

关于javascript - IF 语句在单击事件的 jQuery 回调函数中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38159929/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com