Javascript jQuery与'；这'；修饰符和if/else语句_Javascript_Jquery_Css_If Statement_This

Javascript jQuery与'；这'；修饰符和if/else语句

javascript jquery css if-statement

Javascript jQuery与'；这'；修饰符和if/else语句,javascript,jquery,css,if-statement,this,Javascript,Jquery,Css,If Statement,This,好的，我正试图通过点击页面侧面的按钮在浏览器中修改或移动图像，但是if/else语句中的脚本无法正常工作。到目前为止，我在jQuery中的内容如下： <meta charset="utf-8"> <title>Image Mod</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="http://code.jquery.com/jq

好的，我正试图通过点击页面侧面的按钮在浏览器中修改或移动图像，但是if/else语句中的脚本无法正常工作。到目前为止，我在jQuery中的内容如下：

<meta charset="utf-8">
<title>Image Mod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.js">
var menu = $('ul li').click(function() {
console.log($(this).index());


if (menu = 0) {
$('this').css('width', '80%')
}

else if (menu = 1) {
$('this').css('height', '80%')  
}

else if (menu = 2) {
$('this').css('height', '80%')
}

else if (menu = 3) {
$('this').css('top', '30')
}

else if (menu = 4) {
$('this').css('left', '50')
}

else if (menu = 5) {
$('this').css('left', -50')
}
else {

}
});
</script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>Edit 1</li>
            <li>Edit 2</li>
            <li>Edit 3</li>
            <li>Edit 4</li>
            <li>Edit 5</li>
            <li>Edit 6</li>
        </ul>
    </nav>
    <img class="active" src="images/picture.jpg" />
</body>


图像模组
变量菜单=$（'ul li'）。单击（函数（）{
log（$（this.index（））；
如果（菜单=0）{
$（'this'）.css（'width'，'80%”）
}
else if（菜单=1）{
$（'this'）.css（'height'，'80%”）
}
否则如果（菜单=2）{
$（'this'）.css（'height'，'80%”）
}
否则如果（菜单=3）{
$（'this'）.css（'top'，'30'））
}
否则如果（菜单=4）{
$（'this'）.css（'left'，'50'））
}
否则如果（菜单=5）{
$（'this'）.css（'left'，-50'））
}
否则{
}
});

编辑1
编辑2
编辑3
编辑4
编辑5
编辑6

$（'this'）是标记的选择器

<meta charset="utf-8">
<title>Image Mod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.js">
var menu = $('ul li').click(function() {
console.log($(this).index());


if (menu = 0) {
$('this').css('width', '80%')
}

else if (menu = 1) {
$('this').css('height', '80%')  
}

else if (menu = 2) {
$('this').css('height', '80%')
}

else if (menu = 3) {
$('this').css('top', '30')
}

else if (menu = 4) {
$('this').css('left', '50')
}

else if (menu = 5) {
$('this').css('left', -50')
}
else {

}
});
</script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>Edit 1</li>
            <li>Edit 2</li>
            <li>Edit 3</li>
            <li>Edit 4</li>
            <li>Edit 5</li>
            <li>Edit 6</li>
        </ul>
    </nav>
    <img class="active" src="images/picture.jpg" />
</body>

将其更改为$（此）

<meta charset="utf-8">
<title>Image Mod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.js">
var menu = $('ul li').click(function() {
console.log($(this).index());


if (menu = 0) {
$('this').css('width', '80%')
}

else if (menu = 1) {
$('this').css('height', '80%')  
}

else if (menu = 2) {
$('this').css('height', '80%')
}

else if (menu = 3) {
$('this').css('top', '30')
}

else if (menu = 4) {
$('this').css('left', '50')
}

else if (menu = 5) {
$('this').css('left', -50')
}
else {

}
});
</script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>Edit 1</li>
            <li>Edit 2</li>
            <li>Edit 3</li>
            <li>Edit 4</li>
            <li>Edit 5</li>
            <li>Edit 6</li>
        </ul>
    </nav>
    <img class="active" src="images/picture.jpg" />
</body>

在if语句中，single=是一个赋值，如果右边的值不是零，它将计算为true。您需要使用==来测试相等性。你应该考虑一个开关语句，比如：

<meta charset="utf-8">
<title>Image Mod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.js">
var menu = $('ul li').click(function() {
console.log($(this).index());


if (menu = 0) {
$('this').css('width', '80%')
}

else if (menu = 1) {
$('this').css('height', '80%')  
}

else if (menu = 2) {
$('this').css('height', '80%')
}

else if (menu = 3) {
$('this').css('top', '30')
}

else if (menu = 4) {
$('this').css('left', '50')
}

else if (menu = 5) {
$('this').css('left', -50')
}
else {

}
});
</script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>Edit 1</li>
            <li>Edit 2</li>
            <li>Edit 3</li>
            <li>Edit 4</li>
            <li>Edit 5</li>
            <li>Edit 6</li>
        </ul>
    </nav>
    <img class="active" src="images/picture.jpg" />
</body>

switch ($(this).index())  {
    case 0: // Stuff
          break;
    case 1: // More stuff
          break;
    default:
          // No other match
}

基本上，你的观点是错误的

<meta charset="utf-8">
<title>Image Mod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.js">
var menu = $('ul li').click(function() {
console.log($(this).index());


if (menu = 0) {
$('this').css('width', '80%')
}

else if (menu = 1) {
$('this').css('height', '80%')  
}

else if (menu = 2) {
$('this').css('height', '80%')
}

else if (menu = 3) {
$('this').css('top', '30')
}

else if (menu = 4) {
$('this').css('left', '50')
}

else if (menu = 5) {
$('this').css('left', -50')
}
else {

}
});
</script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>Edit 1</li>
            <li>Edit 2</li>
            <li>Edit 3</li>
            <li>Edit 4</li>
            <li>Edit 5</li>
            <li>Edit 6</li>
        </ul>
    </nav>
    <img class="active" src="images/picture.jpg" />
</body>

在事件处理程序外部执行if/else语句
做作而不是比较

要检查

$（'li'）.index（）时，检查处理程序的返回值



因此，对于给定的HTML：
<meta charset="utf-8">
<title>Image Mod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.js">
var menu = $('ul li').click(function() {
console.log($(this).index());


if (menu = 0) {
$('this').css('width', '80%')
}

else if (menu = 1) {
$('this').css('height', '80%')  
}

else if (menu = 2) {
$('this').css('height', '80%')
}

else if (menu = 3) {
$('this').css('top', '30')
}

else if (menu = 4) {
$('this').css('left', '50')
}

else if (menu = 5) {
$('this').css('left', -50')
}
else {

}
});
</script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>Edit 1</li>
            <li>Edit 2</li>
            <li>Edit 3</li>
            <li>Edit 4</li>
            <li>Edit 5</li>
            <li>Edit 6</li>
        </ul>
    </nav>
    <img class="active" src="images/picture.jpg" />
</body>

<nav id="sidebar">
     <ul>
         <li>Edit 1</li>
         <li>Edit 2</li>
         <li>Edit 3</li>
         <li>Edit 4</li>
         <li>Edit 5</li>
         <li>Edit 6</li>
     </ul>
</nav>
<section>
    <img class="active" src="http://lorempixel.com/400/200/" />
</section>

您需要使用以下jQuery代码：
<meta charset="utf-8">
<title>Image Mod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.js">
var menu = $('ul li').click(function() {
console.log($(this).index());


if (menu = 0) {
$('this').css('width', '80%')
}

else if (menu = 1) {
$('this').css('height', '80%')  
}

else if (menu = 2) {
$('this').css('height', '80%')
}

else if (menu = 3) {
$('this').css('top', '30')
}

else if (menu = 4) {
$('this').css('left', '50')
}

else if (menu = 5) {
$('this').css('left', -50')
}
else {

}
});
</script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>Edit 1</li>
            <li>Edit 2</li>
            <li>Edit 3</li>
            <li>Edit 4</li>
            <li>Edit 5</li>
            <li>Edit 6</li>
        </ul>
    </nav>
    <img class="active" src="images/picture.jpg" />
</body>

jQuery(function($) {

    $('#sidebar').find('li').on('click', function() {
        var position = $(this).index(), // the position of the <li> in the <ul>
            css = {
                property: null,
                value: null
            }, // prepare to store CSS properties and values to apply to the img
            $img = $('img'); // the img on which CSS changes are applied

        // define CSS properties and values according to the position of the <li> clicked
        switch(position) {
            case 0:
                css.property = 'width';
                css.value = '80%';
                break;
            case 1:
                css.property = 'height';
                css.value = '80%';
                break;
            case 2:
                css.property = 'height';
                css.value = '80%';
                break;
            case 3:
                css.property = 'top';
                css.value = '30px';
                break;
            case 4:
                css.property = 'left';
                css.value = '50px';
                break;
            case 5:
                css.property = 'left';
                css.value = '-50px';
                break;
        }

        // apply CSS properties
        $img.css(css.property, css.value);

    });

});

jQuery（函数（$）{
$（'#侧边栏'）。查找（'li'）。打开（'click'，function（））{
var position=$（this）.index（），//在
css={
属性：null，
值：null
}，//准备存储CSS属性和值以应用于img
$img=$（'img'）；//应用CSS更改的img
//根据单击的的位置定义CSS属性和值
开关（位置）{
案例0：
css.property='width'；
css.value='80%'；
打破
案例1：
css.property='height'；
css.value='80%'；
打破
案例2：
css.property='height'；
css.value='80%'；
打破
案例3：
css.property='top'；
css.value='30px'；
打破
案例4：
css.property='left'；
css.value='50px'；
打破
案例5：
css.property='left'；
css.value='-50px'；
打破
}
//应用CSS属性
$img.css（css.property，css.value）；
});
});

您是否知道您的if…else
是在事件处理程序之外编写的？您可以发布html吗？使用$（“菜单”）
将
标记作为目标（在html 4.01中不推荐使用该标记）。如果您想使用变量，只需使用菜单
（虽然我不确定在变量中存储事件处理程序是否有用，但我可能在这一点上错了）。此外，当您想进行比较（=
）时，您在If语句中做了一个做作（=
）@td edge没有问题，addedIt最好检查索引值：$（this）.index（）@optic这是我最初尝试的，但我遇到了问题…您建议我怎么做？将开关（菜单）更改为开关（$（this.index（））-谢谢@optic
<meta charset="utf-8">
<title>Image Mod</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.js">
var menu = $('ul li').click(function() {
console.log($(this).index());


if (menu = 0) {
$('this').css('width', '80%')
}

else if (menu = 1) {
$('this').css('height', '80%')  
}

else if (menu = 2) {
$('this').css('height', '80%')
}

else if (menu = 3) {
$('this').css('top', '30')
}

else if (menu = 4) {
$('this').css('left', '50')
}

else if (menu = 5) {
$('this').css('left', -50')
}
else {

}
});
</script>
</head>
<body>
    <nav id="sidebar">
        <ul>
            <li>Edit 1</li>
            <li>Edit 2</li>
            <li>Edit 3</li>
            <li>Edit 4</li>
            <li>Edit 5</li>
            <li>Edit 6</li>
        </ul>
    </nav>
    <img class="active" src="images/picture.jpg" />
</body>