Fatal编程技术网
  • jquery/
  • jquery if/else块问题

jquery if/else块问题

jquery

jquery if/else块问题,jquery,Jquery,我的if/else块有问题。问题是else块总是在执行。当单击发生时，如果两个select元素都有一个“current drop”类，则只应执行if块 但是，由于这两个类在if块的末尾被删除（稍后使用change（）方法再次添加这些类），因此我认为这导致了else块的执行。是不是因为类被删除时click事件没有完成触发，导致条件发生变化 我怎样才能解决这个问题 $('.add-button').click(function() { var class1=$("#select-pub").att

我的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');
}

});

$（'.add按钮'）。单击（函数（）{
var class1=$（“#选择发布”）.attr（'class'）；
var class2=$（“#选择段”）.attr（'class'）；
如果（（class1=='current-drop'）&&（class2=='current-drop'））{
$（'
  • '，{text:$（'#选择发布选项：选定'）。text（）}
.appendTo（'div#publisher results ul'）；
$（'
  • '，{text:$（'#选择段选项：选定'）。text（）
.appendTo（'div#section results ul'）；
$（“#选择发布”）.removeClass（'current-drop'）；
$（“#选择段”）.removeClass（'current-drop'）；
$（'#错误消息'）.css（'visibility'，'hidden'）；
}
其他的
{
$（'#错误消息'）.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>

    
集团商务|仪表盘
$（文档）.ready（函数（）{
$（“点击向上”）.fancybox({
“填充”：0，
“边距”：0，
“滚动”：“否”，
‘showCloseButon’：‘true’，
“套色”：“dfdfdf”
});
});
/*自定义主题*/
h1{字体系列：verdana；字体大小：18px；颜色：#122652；填充：30px 0 20px；}
表{宽度：577px；左边距：20px；
边框：1px实心#d5d5d5；字体系列：arial；字体大小：11px；}
表td{
右边框：1px实心#d5d5；
填充：5px 0 5px 5px；
}
tr.table-bg td{
边框底部：1px实心#d5d5；
字体大小：粗体；
背景：url（images/table-top bg.jpg）repeat-x；
}
#模态左{
宽度：272px；
利润上限：-11px；
浮动：左；
}
#模态权利{
宽度：335px；
浮动：对；
利润上限：-11px；
}
#错误消息{
边缘底部：15px；
左边距：20px；
边缘顶部：5px；
}
.错误默认值{
颜色：红色；
}
.错误信息编号{
可见性：隐藏！重要；
}
。错误消息是{
能见度：可见；
}
#模态左p{
左边距：20px；
}
#模态左a，#模态右a{
背景：url（images/add select.gif）不重复；
页边顶部：-1px；
}
#模态左a{
位置：相对位置；
右：2px；
}
.选择div{
宽度：272px；
浮动：左；
}
.联络组{
宽度：46px；
高度：22px；
浮动：对；
边缘顶部：30px；
}
#模态左选择{
左边距：20px；
宽度：252px；
}
#出版商结果{
背景色：#f9f9f9；
宽度：252px；
高度：100px；
左边距：20px；
边缘顶部：5px；
}
#分部结果{
背景色：#f9f9f9；
宽度：252px；
高度：100px；
利润上限：3倍；
}
.select-div2{
宽度：220px；
浮动：左；
}
.select-div2选择{
宽度：252px；
}
.link-div2{
宽度：46px；
高度：22px；
浮动：对；
位置：相对位置；
右：22px；
}
#模态权利a{
背景：url（images/add select.gif）不重复；
位置：相对位置；
右：2px；
}
#出版商结果{
溢出：隐藏；
}
#出版商结果{
页边距顶部：5px！重要；
}
#出版结果李{
列表样式：无；
位置：相对位置；
右：30px；
利润底部：3倍；
}
#分部结果{
溢出：隐藏；
}
#分段结果{
页边距顶部：5px！重要；
}
#细分结果li{
列表样式：无；
位置：相对位置；
右：30px；
利润底部：3倍；
}
#页脚{
文本对齐：右对齐；
边缘顶部：150px；
宽度：100%；
右侧填充：30px；
}
#页脚提交{
显示：块；
浮动：对；
宽度：116px；
高度：22px；
背景：url（images/submittocopy.gif）不重复；
位置：相对位置；
右：12px；
左边距：10px；
}
#页脚取消{
显示：块；
浮动：对；
宽度：68px；
高度：22px；
背景：url（images/cancel.gif）不重复；
位置：相对位置；
右：12px；
}
#盒子内容{
边框：1px纯白；
}
发送fol

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