Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>If Else</title>
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<style  TYPE="text/css"> 

    .show                                       { display:block; }
    .hide                                       { display:none; }

</style>
</head>
<body>
<script type="text/javascript">
$('#portweb').click(function() {

    if ('li[value*=web] img'.hasClass("hide")) {
        $('li[value*=web] img').removeClass('hide').addClass('show');
    }
    else if ('li[value*=web] img'.hasClass("show")) {
        $('li[value*=web] img').removeClass('show').addClass('hide');
    }

});
</script>

<a href="#" id="portweb">Web</a>
<br />

        <ul id="portfolioWrapperSet">
            <li value="web dev"><a href="#"><img src="images/portfilio/ph1.jpg" class="hide" /></a></li>
            <li value="web packaging print media"><a href="#"><img src="images/portfilio/ph2.jpg" class="hide" /></a></li>
            <li value="tv packaging print media"><a href="#"><img src="images/portfilio/ph3.jpg" class="hide" /></a></li>
            <li value="web packaging print media social"><a href="#"><img src="images/portfilio/ph4.jpg" class="hide" /></a></li>
        </ul>


</body>
</html>

因此我遇到的问题实际上是让我的函数删除'.hide'类，然后通过我的if语句添加'.show'类。

Answer 1

您正在尝试在准备好之前操纵DOM。尝试将您的代码包装在document.ready语句中。同样在你的ifs中你试图在未定义的字符串上调用hasClass方法：

$(function() {

    $('#portweb').click(function() {

        if ($('li[value*=web] img').hasClass("hide")) {
            $('li[value*=web] img').removeClass('hide').addClass('show');
        }
        else if ($('li[value*=web] img').hasClass("show")) {
            $('li[value*=web] img').removeClass('show').addClass('hide');
        }

    });

});

Answer 2

您应该使用.show()和.hide()方法，因为您尝试做的就是它们的设计目标。

您需要将代码包装到一个函数中，该函数将在引发ready事件时执行

$(function() { /* code here */ });

所以它应该是这样的

$(function() {

    $('#portweb').click(function() {

        if ('li[value*=web] img'.hasClass("hide")) {
            $('li[value*=web] img').removeClass('hide').addClass('show');
        }
        else if ('li[value*=web] img'.hasClass("show")) {
            $('li[value*=web] img').removeClass('show').addClass('hide');
        }

    });

});

Answer 3

尝试将if条件更改为以下内容：

if ($('li[value*=web] img').hasClass("hide")) {
        $('li[value*=web] img').removeClass('hide').addClass('show');
    }
    else if ($('li[value*=web] img').hasClass("show")) {
        $('li[value*=web] img').removeClass('show').addClass('hide');
    }

Jquery，Click / If Else功能，不工作

3 个答案: