个人中心
gpt4 book ai didi

jquery if/else block 问题

转载 作者：行者123 更新时间：2023-12-01 06:31:21 26 4
gpt4 key购买 nike

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

但是，由于这两个类在 if block 的末尾被删除(稍后使用 change() 方法再次添加这些类)，那么我认为这会导致 else block 执行。是否是因为删除类时单击事件尚未完成触发，导致条件发生变化？

我该如何解决这个问题？ 

$('.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>

最佳答案

如果这些元素上有任何其他类，它总是会失败。将 if 部分修改为:

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

关于jquery if/else block 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3875938/

26 4 0
文章推荐： jQuery - 在一行中执行一段代码
文章推荐： Jquery:if中的几次比较，有什么办法可以把它写得更短吗？
文章推荐： 添加工具提示样式错误消息时jquery验证错误放置问题
文章推荐： java - 从 Android 中的 EditText 检索数据？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com