Javascript and jquery syntax

I do not know how to look for this, so I ask here.

I am trying to figure out how this code works:

if ($("#main .oc .dc .image").removeAttr("style"), 1120 > wW && wW > 920)
    $("#main .oc .dc .image").css({
        width: Math.round(.3 * wW) + "px",
        left: "calc(50% - " + Math.round(.3 * wW / 4) + "px)"
    });

My questions -

What does the comma between .removeAttr("style")and 1120 > wWin the condition of this statement?

And how exactly the action is performed -

$("#main .oc .dc .image").css(

before curly braces and no quotes in css properties -

{width:Math.round(.3*wW)+"px",left:"calc(50% - "+Math.round(.3*wW/4)+"px)"}

bothers me.

+4
source share
1 answer

Thanks for the question, m axem ...
And thanks for the explanation, @vlaz ...

I learned something new!
I made a test snippet to get through this:

var wW = 1000;

$("#test1").on("click",function(){
    if ($("#main .oc .dc .image").removeAttr("style"), 1120 > wW && wW > 920)
        $("#main .oc .dc .image").css({
            width: Math.round(.3 * wW) + "px",
            left: "calc(50% - " + Math.round(.3 * wW / 4) + "px)"
        });
});

$("#test2").on("click",function(){
    if (1120 > wW && wW > 920)
        $("#main .oc .dc .image").css({
            width: Math.round(.3 * wW) + "px",
            left: "calc(50% - " + Math.round(.3 * wW / 4) + "px)"
        });
});

$("#test3").on("click",function(){
    if (false, 1120 > wW && wW > 920)
        $("#main .oc .dc .image").css({
            width: Math.round(.3 * wW) + "px",
            left: "calc(50% - " + Math.round(.3 * wW / 4) + "px)"
        });
});
.image{
    border:1px solid black;
    width:50%;
    position:absolute;
    left:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    main
    <div class="oc">
        oc
        <div class="dc">
            dc
            <div class="image" style="color:red;">
                image
            </div>  
        </div>  
    </div>  
</div>
<br>
<br>
<input type="button" id="test1" value="Test 1 - Execute full condition"><br>
<input type="button" id="test2" value="Test 2 - Execute condition without the left hand part"><br>
<input type="button" id="test3" value="Test 3 - Execute condition with a FALSE in the left hand part"><br>
Run codeHide result

So, the fact is that in the condition there are two arguments, the coma is divided.
Maybe more.

" 1" ( , IS ), ( ) if.

.
" 3" , false.

, wW 1000, true (, , ).
CSS position:absolute .image.

@Jason P , "" .
. , , !

+2

Source: https://habr.com/ru/post/1660948/


All Articles