jQuery 'this'修饰符和if/else语句

jQuery issues with the 'this' modifier and if/else statement

本文关键字：if 语句 else this jQuery 更新时间：2023-09-26

好的，所以我试图使它，使图像可以修改或移动在浏览器中点击按钮在页面的一边，但在我的脚本如果/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>

$('this')是标签的选择器。

改为$(this)

在if语句中，单个=是一个赋值，如果右边的值非零，它将计算为true。您需要使用==来测试是否相等。您应该考虑一个switch语句，如下所示:

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

基本上，你错了

在事件处理程序

if/else

做模仿而不是比较

$('li').index();

检查处理程序的返回值

对于这个给定的HTML:

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

^{<section>是必需的，因为您想要更改<img>的高度}

这个给定的CSS:

#sidebar li {cursor: pointer;}
#sidebar li:hover {color: purple;}
section {height: 200px;}
img {height: 100%; position: relative;}

您需要使用以下jQuery代码:

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);
    });
});

工作JSFiddle