Question

我遇到了if / else块的问题。问题是else块总是在执行。当发生单击时，如果两个select元素都具有“current-drop”类，则只应执行if块。

但是，由于在if块的末尾删除了这两个类（稍后使用change()方法再次添加类），我认为这会导致else块执行。是因为当删除类时，click事件没有完成触发，导致条件发生变化？

我该如何解决这个问题？

$('.add-button').click(function() {

var class1=$("#select-pub").attr('class');
var class2=$("#select-segment").attr('class');

if ((class1=='current-drop') && (class2=='current-drop')) {

    $('<li />', {text: $('#select-pub option:selected').text()})
    .appendTo('div #publisher-results ul');
    $('<li />', {text: $('#select-segment option:selected').text()})
    .appendTo('div #segment-results ul');
    $('#select-pub').removeClass('current-drop');
    $('#select-segment').removeClass('current-drop');
    $('#error-message').css('visibility','hidden');
}

else
{
    $('#error-message').css('visibility','visible');
}

});

编辑：这是页面 - 是的，我知道现在有点混乱......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Group Commerce | Dashboard</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.css"/>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/add-items-over.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {


    $("a#click-up").fancybox({
        'padding':0,
        'margin':0,
        'scrolling':'no',
        'showCloseButon':'true',
        'overlayColor':'#dfdfdf'
        });



});
</script>



 <style type="text/css">
        /* Custom Theme */


        h1 {font-family:verdana;font-size:18px; color:#122652;padding:30px 0 0 20px;}

        table {width:577px;margin-left:20px;
        border:1px solid #d5d5d5;font-family:arial; font-size:11px;}

        table td {
            border-right:1px solid #d5d5d5;
            padding:5px 0 5px 5px;
            }

        tr.table-bg td {
            border-bottom:1px solid #d5d5d5;
            font-weight:bold;
            background:url(images/table-top-bg.jpg) repeat-x;
            }

        #modal-left {
            width:272px;
            margin-top:-11px;
            float:left;
            }

        #modal-right {
            width:335px;
            float:right;
            margin-top:-11px;
            }

            #error-message {
            margin-bottom:15px;

        margin-left:20px;
            margin-top:5px;
            }

            .error-default {
                color:red;
                }

            .error-message-no {
                visibility:hidden !important;
                }

        .error-message-yes {
                visibility:visible;
                }

        #modal-left p {
            margin-left:20px;
            }

        #modal-left a, #modal-right a {
            background:url(images/add-select.gif) no-repeat;
            margin-top:-1px;
            }

        #modal-left a {
            position:relative;
            right:2px;
            }



            .select-div {
                width:272px;
                float:left;
                }

            .link-div {
                width:46px;
                height:22px;
                float:right;
                margin-top:30px;
                }

            #modal-left select {
            margin-left:20px;
            width:252px;
            }

            #publisher-results {
                background-color:#f9f9f9;
                width:252px;
                height:100px;
                margin-left:20px;
                margin-top:5px;
                }

            #segment-results {
                background-color:#f9f9f9;
                width:252px;
                height:100px;
                margin-top:3px;
                }

            .select-div2 {
                width:220px;
                float:left;
                }

            .select-div2 select {
                width:252px;
                }

            .link-div2 {
                width:46px;
                height:22px;
                float:right;
                position:relative;
                right:22px;
                }

            #modal-right a {
            background:url(images/add-select.gif) no-repeat;
            position:relative;
            right:2px;
            }

            #publisher-results {
                overflow:hidden;
                }

            #publisher-results ul {
                margin-top:5px !important;
                }

            #publisher-results li {
                list-style:none;
                position:relative;
                right:30px;
                margin-bottom:3px;
                }

            #segment-results {
                overflow:hidden;
                }

            #segment-results ul {
                margin-top:5px !important;
                }

            #segment-results li {
                list-style:none;
                position:relative;
                right:30px;
                margin-bottom:3px;
                }

            #footer {
                text-align:right;
                margin-top:150px;
                width:100%;
                padding-right:30px;
                }

            #footer-submit  {
                display:block;
                float:right;
                width:116px;
                height:22px;
                background:url(images/submit-to-copy.gif) no-repeat;
                position:relative;
                right:12px;
                margin-left:10px;
                }

            #footer-cancel {
                display:block;
                float:right;
                width:68px;
                height:22px;
                background:url(images/cancel.gif) no-repeat;
                position:relative;
                right:12px;
                }
            #box-content {
                border:1px solid white;
                }

    </style>

</head>

<body>

<div id="modal-wrap">
<a id="click-up" href="#box-content">Click here for popup</a>

<div style="display:none;">
<div id="box-content" style="width:620px;height:335px;background:url(images/modal-bg.gif) left top no-repeat;">
<h1>Send the following deal to copy stage...</h1>

<table border="0" cellspacing="0" cellpadding="0">
<tr class="table-bg">
<td>Vendor</td>
<td>Vendor ID</td>
<td style="width:100px;">Offer</td>
<td>Status</td>
<td>Availability Start</td>
<td style="border-right:none;">Availability End</td>
</tr>

<tr>
<td>Apple</td>
<td>10010000111</td>
<td>$2.99 app</td>
<td>Ready for Market</td>
<td>9/20/2010</td>
<td style="border-right:none;">9/20/2010</td>
</tr>
</table>

<p id="error-message"><em>Both the publisher and the segment fields are required!</em></p>
<div id="modal-left">



<script type="text/javascript">

$(document).ready(function() {

$('#error-message').addClass('error-default');
$('#select-pub').change(function() {
$(this).addClass('current-drop');
}); 

$('#select-segment').change(function() {
$(this).addClass('current-drop');
}); 


$('.add-button').click(function() {

var class1=$("#select-pub").attr('class');
var class2=$("#select-segment").attr('class');
if ($('#select-pub').hasClass('current-drop') && $('#select-segment').hasClass('current-drop')) {

    $('<li />', {text: $('#select-pub option:selected').text()})
    .appendTo('div #publisher-results ul');
    $('<li />', {text: $('#select-segment option:selected').text()})
    .appendTo('div #segment-results ul');
    $('#select-pub').removeClass('current-drop');
    $('#select-segment').removeClass('current-drop');
    $('#error-message').css('visibility','hidden');
    }

    /*else
    {
    $('#error-message').css('visibility','visible');
    }*/

});
});

</script>



<div class="select-div">

<select id="select-pub">
<option val="1" selected>Publisher 1</option>
<option val="2">Publisher 2</option>
<option val="3">Publisher 3</option>
<option val="4">Publisher 4</option>
</select> 

</div>

<!--<div class="link-div">
<a class="add-button" href="#" style="width:46px;height:22px;display:block;"></a>
</div>-->

<div style="clear:both;"></div>
<div id="publisher-results">
<ul>
</ul>
</div>

</div>


<script type="text/javascript">

$(document).ready(function() {

$('.add-button-2').click(function() {
$('<li />', {text: $('#select-segment option:selected').text()})
.appendTo('#segment-results ul');
$('#segment-results ul li:odd').css('display','none');
});

});

</script>
<div id="modal-right">

<div class="select-div2">
<select id="select-segment">

<option selected>Segment 1</option>
<option>Segment 2</option>
<option>Segment 3</option>
<option>Segment 4</option>
</select>

</div>

<div class="link-div2">
<a href="#" class="add-button" style="width:46px;height:22px;display:block;"></a>
</div>

<div style="clear:both;"></div>
<div id="segment-results">
<ul style="margin:0;">
</ul>
</div>

</div>

<div id="footer">

<a href="#" id="footer-submit"></a>
<a href="javascript:;" onclick="$.fancybox.close();" id="footer-cancel"></a>
</div>
</div>
</div>
</body>
</html>

Answer 1

如果您对这些元素有任何其他类，它将始终失败。将if部分修改为：

if($('#select-pub').hasClass('current-drop') && $('#select-segment').hasClass('current-drop')) {
...

Answer 2

在点击if / else块之前，你应该看一下class1和class2的值是什么。使用alert（）或console.log（）。

Answer 3

发布代码后（谢谢），我整理了HTML。看起来您错过了某个可能导致问题的关闭<div>标记。据我所知，你的jQuery是对的 - 所以我的猜测是在HTML上。（我会寻找引号以及匹配的括号。）

jquery if / else阻塞问题

3 个答案: