Question

我有一些<div>，当点击左或右按钮时，必须修改其padding-left。我希望根据每个所选元素的font-weight更改font-style和padding-left。如果padding-left为20，则font-weight将设置为normal。当font-style为40时，其italic将被padding-left分配。

＆＃13;

 $(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");
                    }

                });
            });
        });

＆＃13;

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

＆＃13;

选择div并且单击左键

时，填充左侧会发生变化

Answer 1

为您提供以下建议和修订代码。

italic属于font-style而非font-weight。
为什么它不能改变CSS样式是因为你覆盖了$("#key").click(function(){ // Here })而没有在$("#key1").click(function(){ // Here })中提供相同的代码
$(".toGrab")返回匹配的jQuery元素数组，因此您必须执行$(".toGrab").each(function(){ // $(this) will be the each element of the Array. })。

＆＃13;

 $(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"); 
                });
            });

        });

＆＃13;

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

＆＃13;

IF语句不适用于click事件的jQuery回调函数

1 个答案: