Question

我正在使用以下正常工作的JQuery函数：

$(function () {
    $('#accmenu').change(function() {
        $(".insightsgraphs div").hide();
        $(".insightsoptions input").removeClass("green");
        $("#newLikes").one('click', function () {
            $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:
                function(response) {
                    var json = response.replace(/"/g,'');
                    json = "[" + json + "]";
                    json = json.replace(/'/g,'"');
                    var myData = JSON.parse(json);
                    var myChart = new JSChart('dailyNewLikes', 'line');
                    myChart.setDataArray(myData);
                    myChart.setAxisNameX('');
                    myChart.setAxisNameY('');
                    myChart.setAxisValuesColorX('#FFFFFF');
                    myChart.setSize(470, 235);
                    myChart.setTitle('Daily New Likes');
                    myChart.draw();
                }});
            return false;
        });
        $("#unlikes").one('click', function () {
            $.ajax({type:'GET', url: 'unlikes.php', data:$('#ChartsForm').serialize(), success:
                function(response) {
                    $("#dailyUnlikes").html(response);
                }});
            return false;
        });
    });
    $("#newLikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyNewLikes').toggle();
        return false;
    });
    $("#unlikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyUnlikes').toggle();
        return false;
    });
});

但我想创建一个条件：如果以下两个日期输入之一：

var since = $('#dateoptions input[name="since_date"]').val();
var until = $('#dateoptions input[name="until_date"]').val();

为空我希望收到警报并且仅在满足条件时才执行.one()功能。例如，当我点击其中一个没有日期输入的按钮时，我希望收到类似alert("One of the date or both missing")的提醒，然后在我选择日期后再次按下按钮执行.one()功能就像上面的例子一样。我希望我能说清楚自己。我知道我可以使用类似的东西：

if (until == "" || since == "") {
    alert("One of the date or both missing")
} else {}

但到目前为止我的尝试都没有成功。可能我没有将条件放在它应该的位置......此外，还可以通过警报将输入聚焦，突出显示或类似的东西？

编辑：这是一个小提琴： http://jsfiddle.net/DanielaVaduva/ueA7R/6/ 我用其他东西替换ajax调用而不修改流程。

Answer 1

尝试使用以下方法检查您的值：

if (until.trim().length === 0 || since.trim().length === 0) {
    //TODO here
}

我建议您检查输入中的name属性，并检查它与检索输入值时使用的属性相同。

如果仍然无法正常工作，请尝试一些'调试'，如：

console.log(since);

并检查它是否正确得到你的价值。

<强>更新

我不知道你是否想要这个（ demo ）。如果您的日期为空，则无效。 AJAX调用不适用于JsFiddle，因为您使用.serialize()并且它通过URL发送信息，作为GET类型，您需要将其作为POST发送。没关系。如果您已准备好服务器以接收GET方法，那么它将起作用。

另外，我必须补充一点，如果你想改变颜色 ONLY 如果AJAX成功，你必须添加我在演示中使用的更改颜色功能，如果你想检查你的日期每次要向服务器发送信息时，将.one()函数更改为.on()函数，并在AJAX成功后删除该函数：

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

（有关删除功能的详细信息 here ）;

我希望这会帮助你完成你想要的方式。如果它不是您想要的，请发表评论。

Answer 2

我不确定我是否完全理解了这个问题，但你可以查看这个＆gt;＆gt;

Fiddle Demo

的 HTML 的

将ID添加到日期字段，例如

<input id="until" type="date" name="until_date" value="Until date"> <input id="since" type="date" name="since_date" value="Since date">

仅用于突出显示所需日期＆gt;＆gt;

的 CSS 的

.req{ border:2px red solid; } .required{ color:red; font-size: 0.8em; font-style:italic; }

的的jQuery 的

$(function () { //removing the highlighting class on change $('#until').change(function() { $(this).removeClass('req').next('.required').remove(); }); $('#since').change(function() { $(this).removeClass('req').next('.required').remove(); }); $('#accmenu').change(function() { var dSince= $('#since').val(); var dUntil= $('#until').val(); if(dSince=='' || dUntil==''){ alert('You MUST select Both dates!'); $(this).val(0); // Set the menu to the default //Adding the Highlight and focus if(dSince==''){ $('#since').addClass('req').after('<span class="required">- required *</span>').focus();} if(dUntil==''){ $('#until').addClass('req').after('<span class="required">- required *</span>').focus();} }else{ $(".insightsgraphs div").hide(); $(".insightsoptions input").removeClass("green"); $("#newLikes").one('click', function () { $("#dailyNewLikes").html('</p>Test daily new likes</p>'); return false; }); $("#unlikes").one('click', function () { $("#dailyUnlikes").html('</p>Test daily unlikes</p>'); return false; }); } //End of the if statement }); $("#newLikes").on('click', function(){ $(this).toggleClass('green'); $('#dailyNewLikes').toggle(); return false; }); $("#unlikes").on('click', function(){ $(this).toggleClass('green'); $('#dailyUnlikes').toggle(); return false; }); });

因此，只要选择accmenu中的选项，它就会检查两个DATE的值，如果两者都是空白，则不会执行该函数。

JQuery日期输入条件

2 个答案: